React+TypeScript组件传参报错：类型{postData:IPostData}不兼容

报错原因 #

你写的PostBox组件直接把IPostData当成了组件参数的类型，但React组件的参数本质是个props对象，不是单独的接口类型。当你在Board.tsx里传<PostBox postData={testPostData} />时，实际传给组件的是{ postData: IPostData }这个对象，但组件期望接收的是IPostData类型的对象，类型对不上，所以报错了。

错误信息翻译：

类型 {postData:IPostData} 无法赋值给类型 'IntrinsicAttributes & IPostData'。

两种修复方法 #

方法1：给组件props加一层包裹 #

修改Post.tsx的组件定义，让它接收一个包含postData字段的props对象：

// Post.tsx
interface IPostData {
  id: number,
  title: string,
  text: string
}

export type { IPostData }

// 组件参数改为props对象，明确包含postData字段
export const PostBox = ({ postData }: { postData: IPostData }) => {
  const { id, title, text } = postData
  return (
    <div>
      <div>{id}</div>
      <div>{title}</div>
      <div>{text}</div>
    </div>
  )
}

这种改法下，Board.tsx的代码不用动，直接就能正常运行。

方法2：直接传接口的所有属性（更常用） #

要是不想多套一层postData，可以让组件的props直接对应IPostData类型，调用的时候展开参数或者逐个传：

// Post.tsx
interface IPostData {
  id: number,
  title: string,
  text: string
}

export type { IPostData }

// 组件props直接用IPostData类型，解构出需要的字段
export const PostBox = ({ id, title, text }: IPostData) => {
  return (
    <div>
      <div>{id}</div>
      <div>{title}</div>
      <div>{text}</div>
    </div>
  )
}

然后修改Board.tsx的调用代码：

// Board.tsx
import { PostBox, IPostData } from './Post'

export default function Board(){
  const testPostData : IPostData = {
    id: 1,
    title: "Testing Post Interface",
    text: "Testing text too"
  }

  return (
    <div>
      {/* 用展开运算符直接传所有属性 */}
      <PostBox {...testPostData} />
      {/* 也可以逐个字段传递 */}
      {/* <PostBox id={testPostData.id} title={testPostData.title} text={testPostData.text} /> */}
    </div>
  )
}

总结 #

React组件的参数永远是一个props对象，写TypeScript类型的时候得对应这个对象的结构，不能直接把数据接口当组件参数类型，这是新手很容易踩的坑。

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