React+TypeScript报错：类型'{ posts: IPost[]; }'不可分配给IntrinsicAttributes类型如何修复？

报错根因 #

React.FC 的泛型参数要求传入的是组件整体Props对象的类型，你当前将其声明为FC<IPost[]>相当于告知TypeScript：Posts组件接收的props本身就是一个IPost数组，但实际调用时你给组件传入的是一个带posts属性的对象{posts: posts}，二者类型不匹配，因此触发类型校验报错。

修复方案 #

只需要调整Posts.tsx中组件的Props类型定义即可，两种写法可选：

• 写法1：单独定义Props接口（可维护性更高，推荐）

// Posts.tsx 调整后代码
interface IPostsProps {
  posts: IPost[];
}

export const Posts: FC<IPostsProps> = ({posts}) => {
  return (
    <div className='post-container'>
      {posts.map((post) => (
        <Post key={post._id} post={post} />
      ))}
    </div>
  );
};

• 写法2：行内直接声明Props类型（适合逻辑简单的小组件）

export const Posts: FC<{ posts: IPost[] }> = ({posts}) => {
  // 原有渲染逻辑保持不变
}

补充说明 #

未抽离组件前你是直接在Main组件内部执行posts.map逻辑，不需要处理组件props的类型声明，所以不会触发该报错。

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