TypeScript组件传参报错：'{ post: IPost; }'无法适配目标类型

问题根源 #

你遇到的错误本质是React组件的props传递与类型定义不匹配：

• 在Posts.tsx中给Post组件传递的是包含post属性的对象：<Post post={post} />
• 但Post.tsx里直接把参数当成IPost类型接收，而React组件的第一个参数永远是所有props组成的对象，不是单个值，因此TypeScript检测到类型不兼容，触发报错。

解决方法一：修正Post组件的props类型定义 #

给Post组件定义专门的props接口，明确它接收post属性：

// Post.tsx
interface PostProps {
  post: IPost;
}

const Post = ({ post }: PostProps) => { 
    console.log(post);
    return (
        <div>{post.title}</div>
    )
}

这样TypeScript就能正确识别传入的post={post}符合PostProps类型，报错会直接消失。

解决方法二：直接传递post的所有属性 #

如果希望Post组件直接使用IPost的属性，可以用展开运算符传递post的全部属性，同时保持Post组件的参数类型为IPost：

// Posts.tsx
export default function Home({ posts }: IPosts) {    
  return (
      <div>
        {posts.map(post => {
          console.log(post);
          return (
            <Post key={post._id} {...post} /> {/* 展开post的所有属性 */}
          )
        })}
      </div>
  )
}

// Post.tsx
const Post = ({ title }: IPost) => { // 直接解构IPost的属性
    console.log(title);
    return (
        <div>{title}</div>
    )
}

这种方式适合Post组件需要直接使用IPost所有属性的场景，无需额外定义props接口。

补充说明 #

你看到运行时参数被包装成{post: {...}}是正常行为——React会把传入组件的所有属性打包成一个props对象，TypeScript的报错正是在提醒你：组件参数的类型定义和实际传入的props对象类型不匹配。

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