React+TypeScript组件传数组Props报错及类型索引问题求助

一、修复组件传参的类型不匹配问题 #

你遇到的第一个错误，是因为把组件的props类型直接定义成了{}[]（对象数组），但React组件的props本质是一个对象结构——哪怕只需要接收一个数组参数，也要把它封装在props对象的属性里。

正确的组件类型定义方式：

// 定义组件接收的props类型
interface TablesToShowProps {
  array: {}[]; // 这里先保留原有的对象数组类型，后面再优化索引问题
}

// 解构props中的array属性
const TablesToShow = ({ array }: TablesToShowProps) => {
  // 你的表格渲染逻辑
  return <table>{/* ... */}</table>;
};

这样在App组件中使用<TablesToShow array={array}/>时，TypeScript就会识别到array是props对象的合法属性，不会再抛出类型不兼容的错误。

二、解决对象索引的类型错误 #

当你把数组元素类型设为{}时，TypeScript默认认为这个空对象没有任何可访问的属性或索引，所以用element[1]这类索引访问会报错。有三种常用解决方式：

1. 定义具体的对象结构（推荐，类型最安全） #

如果知道数组中对象的固定字段，直接定义对应的接口：

// 定义表格行数据的具体结构
interface TableRow {
  id: number;
  column1: string;
  column2: number;
  // 其他需要的字段
}

interface TablesToShowProps {
  array: TableRow[]; // 用具体结构替换{}[]
}

const TablesToShow = ({ array }: TablesToShowProps) => {
  return (
    <table>
      <tbody>
        {array.map(row => (
          <tr key={row.id}>
            <td>{row.column1}</td>
            <td>{row.column2}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

2. 添加索引签名（适用于结构不固定的场景） #

如果不确定对象的具体字段，但需要通过索引访问，可以给对象类型添加索引签名：

// 定义允许任意字符串/数字索引的对象类型
interface IndexableObject {
  [key: string | number]: unknown; // 用unknown比any更安全，访问时可按需断言
}

interface TablesToShowProps {
  array: IndexableObject[];
}

const TablesToShow = ({ array }: TablesToShowProps) => {
  return (
    <table>
      <tbody>
        {array.map((item, idx) => (
          <tr key={idx}>
            <td>{(item[1] as string)}</td> {/* 按需断言类型 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

也可以直接用Record<string | number, unknown>替代自定义的IndexableObject，效果一致。

3. 临时类型断言（不推荐频繁使用） #

如果只是临时需要绕过类型检查，可以用类型断言强制告诉TypeScript对象可被索引：

const TablesToShow = ({ array }: { array: {}[] }) => {
  return (
    <table>
      <tbody>
        {array.map(item => (
          <tr key={Math.random()}>
            <td>{(item as Record<string, any>)[1]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

内容的提问来源于stack exchange，提问作者Soulofcinder