React函数组件FC两种Props类型不兼容如何解决？

先明确核心差异：

• 普通对象的类型检查是协变的：只要类型A的结构符合类型B的要求，A就能赋值给B。你第二个例子里，{name: string}满足{[key:string]: unknown}的索引签名规则，所以可以正常赋值。
• React的FC是函数类型，函数参数的类型检查遵循逆变规则：函数类型(x: T) => R能赋值给(x: U) => R的前提是U是T的子类型。回到你的代码，FCB要求函数接受任意带字符串键的对象，而FCA的函数只接受包含name属性的对象——如果把a赋值给b，调用b时可能传入没有name的参数，会导致a的函数出错，所以TypeScript报错拦截。

解决方法 #

方法1：让FCA的参数兼容FCB的要求

修改FCA的props类型，添加索引签名，让它能接受任意字符串键的属性：

import { FC } from 'react'

type FCA = FC<{
  name: string
  [key: string]: unknown // 添加索引签名，兼容任意额外属性
}>

type FCB = FC<{
  [key: string]: unknown
}>

const a: FCA = ({ name }) => {
  return null
}

const b: FCB = a // ✅ 无错误

这样FCA的参数类型是FCB参数类型的子类型，符合函数参数的逆变规则，既能正常赋值，又能保证a的函数可以获取到name属性。

方法2：使用类型断言（谨慎使用）

如果你能确保调用b时传入的参数一定包含name属性，可以用类型断言跳过TS的检查：

const b: FCB = a as FCB // ✅ 无错误

注意：这种方法会关闭类型检查，若后续调用b时传入不符合要求的参数，会引发运行时错误，仅在你能完全把控参数安全的场景下使用。

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