使用TS时如何声明接收React函数组件作为参数的函数参数类型

React.FC<any> 不是唯一的解决方案，你完全可以实现严格的类型约束，之前用React.FC<FunctionalComponentProps>不生效，大概率是类型作用域或者props定义不匹配的问题，下面是具体的解决方案：

两种严格类型声明方式 #

方式1：使用React.FC类型声明 #

只要保证FunctionalComponentProps在Foo的定义作用域可访问，且和组件实际接收的props完全匹配，直接写即可：

import type { FunctionalComponentProps } from './对应文件路径';

const Foo = (
  para1: string,
  TheFunctionalComponent: React.FC<FunctionalComponentProps>
) => {
  // 内部调用时会有完整的props类型校验
  return <TheFunctionalComponent propA="xxx" propB={xxx} />
}

如果你的组件支持传入children属性，记得要给FunctionalComponentProps加上children?: React.ReactNode定义，或者直接写成：

TheFunctionalComponent: React.FC<React.PropsWithChildren<FunctionalComponentProps>>

方式2：使用原生函数类型声明（兼容度更高） #

如果你不想依赖React.FC的隐式类型，也可以直接和组件的原生定义对齐，写法更直观：

import type { FunctionalComponentProps } from './对应文件路径';

const Foo = (
  para1: string,
  TheFunctionalComponent: (props: FunctionalComponentProps) => JSX.Element
) => {
  // 同样有完整的类型校验
  return <TheFunctionalComponent propA="xxx" propB={xxx} />
}

之前类型不生效的常见排查点 #

• 确认FunctionalComponentProps已经正确导出，且在Foo的定义文件中已经导入，没有拼写错误
• 检查FunctionalComponentProps的属性定义和组件实际接收的props完全一致，没有遗漏属性、类型不匹配的问题
• 若组件需要接收children属性，必须在FunctionalComponentProps中显式定义，或者通过React.PropsWithChildren包裹类型

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