将对象数组传入React子组件时TypeScript类型报错求助

问题根源很明确：你把子组件的props类型定义成了数组本身，但实际传入的props是包含scoreData字段的对象，TypeScript自然会报错数组上不存在scoreData属性。

正确的类型定义步骤： #

• 先定义单个技能对象的类型SkillType
• 再定义子组件的props类型——这是一个对象，里面包含scoreData字段，类型为SkillType[]
• 把FC的泛型设为这个props对象类型，而非数组类型

代码示例 #

1. data.json（示例结构）

[
  {"skill": "React", "score": 90},
  {"skill": "TypeScript", "score": 85}
]

2. App组件（父组件传值）

import scoreData from './data.json';
import UserSkillResult from './UserSkillResult';

function App() {
  return <UserSkillResult scoreData={scoreData} />;
}

export default App;

3. UserSkillResult子组件（正确类型写法）

import { FC } from 'react';

// 单个技能的类型
type SkillType = {
  skill: string;
  score: number;
};

// 子组件的props类型：是包含scoreData的对象
type UserSkillResultProps = {
  scoreData: SkillType[];
};

// FC泛型传入props对象类型，解构获取scoreData
const UserSkillResult: FC<UserSkillResultProps> = ({ scoreData }) => {
  return (
    <div>
      {scoreData.map((item, idx) => (
        <div key={idx}>
          {item.skill}: {item.score}分
        </div>
      ))}
    </div>
  );
};

export default UserSkillResult;

之前的错误在于，你把UserSkillResultType设为SkillType[]，相当于告诉TS子组件的props就是一个数组，那父组件应该直接把数组作为props传递（比如<UserSkillResult {...scoreData} />），但你实际传的是带scoreData属性的对象，类型完全不匹配，所以才会报scoreData不存在的错误。

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