React+TypeScript项目TS2322错误求解：组件传参类型不兼容

咱先来把你遇到的问题拆明白——这个TS2322错误本质上是你传递props的方式和组件定义的接收方式不匹配。

错误原因拆解 #

看你给的极简示例：

const PropsSpan: FunctionComponent<Props> = (props) => <span>{props.name}</span>
// 你这么传递props
return <PropsSpan props={p}></PropsSpan>

你这里是把整个p对象，作为一个名为props的单个属性传给了PropsSpan组件。但PropsSpan定义的props类型是{ name: string }——它期望直接拿到name这个属性，而不是一个叫props的属性。所以TypeScript自然会报错：props这个属性根本不在组件的props类型定义里呀！

为什么{...p}能解决问题？ #

这个“神奇”的写法其实是React里的对象展开语法，它的作用是把p对象里的所有键值对，拆成单独的props传递给组件。比如p是{name: 'George'}，{...p}就等价于直接写name="George"，这样组件就能正确接收到它定义的name属性，TypeScript的类型检查也能顺利通过。

修复后的极简示例代码：

import React, { FunctionComponent } from 'react'
type Props = { name: string }
const PropsSpan: FunctionComponent<Props> = (props) => <span>{props.name}</span>
const PropsComponent = () => {
  const p: Props = { name: 'George' }
  // 用展开语法传递props，符合组件的类型定义
  return <PropsSpan {...p}></PropsSpan>
}
export default PropsComponent

处理Props数组的场景 #

你提到处理props数组时需要额外操作，这里给你一个标准写法：假设你有一个Props类型的数组，要渲染多个PropsSpan组件，只需要遍历数组，对每个元素使用展开语法即可（记得给列表元素加唯一的key，这是React的要求）：

import React, { FunctionComponent } from 'react'
type Props = { name: string }
const PropsSpan: FunctionComponent<Props> = (props) => <span>{props.name}</span>

const PropsListComponent = () => {
  // 模拟一个Props数组
  const submissionsArray: Props[] = [
    { name: 'George' },
    { name: 'Alice' },
    { name: 'Bob' }
  ]

  return (
    <div>
      {submissionsArray.map((item, index) => (
        <PropsSpan key={index} {...item} />
      ))}
    </div>
  )
}
export default PropsListComponent

特殊情况：如果非要传递整个对象作为单个属性 #

如果你确实有需求，要把整个对象作为单个属性传递（不推荐，不符合React常规写法），那你需要修改组件的props类型定义，明确接收这个属性：

import React, { FunctionComponent } from 'react'
type Props = { name: string }
// 修改组件的props类型，接收一个名为submissionsArray的属性
type ComponentProps = { submissionsArray: Props[] }
const SubmissionList: FunctionComponent<ComponentProps> = ({ submissionsArray }) => {
  return (
    <div>
      {submissionsArray.map((item, index) => (
        <span key={index}>{item.name}</span>
      ))}
    </div>
  )
}

// 这样传递就不会报错了
const ParentComponent = () => {
  const submissionsArray: Props[] = [{ name: 'George' }]
  return <SubmissionList submissionsArray={submissionsArray} />
}
export default ParentComponent

总结 #

• 核心问题：你误将整个props对象作为单个属性传递，组件却期望接收分散的属性
• 标准解决方案：使用对象展开语法{...propsObject}传递props
• 数组场景：遍历数组，对每个元素使用展开语法，同时添加唯一key

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