TypeScript提示React组件key属性不存在的TS2322报错如何解决

React项目列表渲染时触发TS2322类型报错：

TS2322: Type '{ key: string; item: string; }' is not assignable to type '{ item: any; }'. Property 'key' does not exist on type '{ item: any; }'.

触发报错的代码：

function Foo() {
    const myThings = ["hi", "bye"]
    return myThings.map((thing) => {
        return <Bar key={thing} item={thing} />
    })
}
function Bar({item}) {
    return <div>{item}</div>
}

当前环境配置：

• 项目基于create-react-app搭建
• tsconfig.json中jsx配置项为"jsx": "react-jsx"

TypeScript未正确加载React JSX内置类型定义，无法识别key是React组件的合法内置属性。react-jsx模式下虽然不需要手动在文件顶部引入React本体，但依然需要保证React类型包被正确安装、TS配置能正确扫描到对应类型声明。

按优先级从高到低选择以下方案即可：

1. 补全组件Props类型+确认类型依赖安装（推荐） #

首先确保项目已安装React官方类型包，执行对应安装命令：

# npm用户
npm install --save-dev @types/react @types/react-dom

# yarn用户
yarn add -D @types/react @types/react-dom

之后给自定义组件明确标注Props类型，TS会自动合并React内置的key等特殊属性类型，不会再报类型错误：

// 定义Bar组件接收的Props类型
type BarProps = {
  item: string
}

function Bar({item}: BarProps) {
    return <div>{item}</div>
}

2. 修正tsconfig.json配置 #

检查tsconfig.json的compilerOptions配置，确保模块解析和类型扫描配置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node", // 必须配置，否则TS无法读取node_modules下的类型包
    "types": ["react", "react-dom"] // 明确指定需要加载的类型包
  }
}

配置修改完成后，重启TS服务即可生效：VSCode用户可通过快捷键Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）唤起命令面板，选择TypeScript: Restart TS Server。

3. 临时兼容方案（不建议长期使用） #

如果暂时无法调整全局配置，可在组件Props类型中显式合并通用类型，临时绕过校验：

function Bar({item}: {item: string} & Record<string, any>) {
    return <div>{item}</div>
}

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