React中使用变量作为对象键的TypeScript类型错误排查

错误根源 #

你把Data定义成了数组类型，导致keyof Data指向的是数组的内置属性（比如length、map），而非你期望的对象键（id、brand等）。这就造成了用keyof Data去索引单个数据对象时，TypeScript认为类型不匹配，抛出错误。

修正步骤 #

1. 修正Data类型定义：把Data改为单个数据对象的类型，组件接收的数组用Data[]表示
2. 指定arrayOfKeys的正确类型：将其类型从string[]改为(keyof Data)[]，让TypeScript知道这是Data对象的合法键数组
3. 优化键提取逻辑（可选）：避免重复键，同时确保空数组场景的边界处理

修正后的完整代码 #

// 定义单个数据对象的类型，而非数组
type Data = {
  id: number;
  brand?: string;
  hostname?: string;
  description?: string;
  contractNumber?: string;
  model?: string;
  user?: string;
};

const Module: React.FC<{ dataToShow: Data[] }> = ({ dataToShow }) => {
  // 明确类型为Data对象的键数组
  const arrayOfKeys: (keyof Data)[] = [];

  if (dataToShow.length > 0) {
    // 提取第一个对象的键，并用Set去重（可选）
    arrayOfKeys.push(...Array.from(new Set(Object.keys(dataToShow[0])) as (keyof Data)[]));
  }

  return (
    <div>
      {dataToShow.map((x) => (
        <div key={x.id}>
          {/* 现在可以安全索引，无需额外类型断言 */}
          {arrayOfKeys[0] && x[arrayOfKeys[0]]}
        </div>
      ))}
    </div>
  );
};

export default Module;

关键说明 #

• 用keyof Data约束键类型后，TypeScript会严格校验键的合法性，彻底消除隐式any类型问题
• 加入arrayOfKeys[0] &&的判断，避免空数组场景下出现undefined索引的报错
• Object.keys默认返回string[]，用as (keyof Data)[]断言是告诉TypeScript这些字符串都是Data的合法键

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