React组件类型错误：类型X无法赋值给‘IntrinsicAttributes & Y’求助

错误原因 #

你的Content组件类型定义有误。React.FC的泛型参数是组件props的类型，但你直接传入了数组类型MyType。而父组件传递的是data={arrOfObj}，这意味着组件接收的props是一个包含data属性的对象，并非直接的数组。

修复方案 #

方案1：声明明确的Props类型

先定义组件的props类型，再传入React.FC：

// Content.jsx
type MyType = { name: string, age: number }[];
type ContentProps = {
  data: MyType;
};

export const Content: React.FC<ContentProps> = ({ data }) => {
  // 正常使用data数组
  return (
    <div>
      {data.map(item => (
        <p key={item.name}>{item.name}, {item.age}</p>
      ))}
    </div>
  );
};

方案2：直接在泛型中定义props

如果不需要单独声明类型，也可以直接在泛型参数里写props结构：

// Content.jsx
type MyType = { name: string, age: number }[];

export const Content: React.FC<{ data: MyType }> = ({ data }) => {
  // 业务逻辑代码
};

错误根源解释 #

原代码中React.FC<MyType>表示组件期望接收的props是MyType类型（即一个数组），但父组件传递的是{ data: arrOfObj }这个对象，类型为{ data: MyType }，和组件期望的类型不匹配，因此触发了类型赋值错误。

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