React TypeScript组件Props类型报错：data属性赋值失败求助

核心问题：React组件参数定义不符合规范 #

React函数组件的第一个参数是props对象，所有传给组件的属性都会被打包到这个对象里。你的代码里的错误根源就在这里：

1. 组件参数声明错误
   你把ResultsSection的第一个参数直接声明为data: iRowData[]，这相当于告诉TypeScript：这个组件要直接接收一个iRowData[]类型的数组。但实际使用组件时，你传的是<ResultsSection data={rowData} />——这会把rowData放到一个名为data的属性里，打包成{ data: rowData }的对象传给组件，和组件期望的参数类型完全不匹配。

2. 类型不兼容触发TS报错
   TypeScript检测到你传入的是一个带有data属性的对象，但组件期望的是iRowData[]类型的数组，两者无法匹配，所以抛出报错：Type '{ data: iRowData[]; }' is not assignable to type 'IntrinsicAttributes & iRowData[]'，翻译过来就是：你传的带data属性的对象，无法赋值给组件要求的iRowData[]类型参数。

快速修正方案 #

要解决这个问题，需要给组件定义正确的props类型，让它接收包含data属性的对象：

interface iRowData {
   name: string
}

// 定义组件的props类型
interface ResultsSectionProps {
  data: iRowData[]
}

export default function ResultsSection({ data }: ResultsSectionProps) {
   return <div>Results</div>
}

这样调整后，父组件的用法就能正常通过TS类型检查了。

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