TypeScript 中如何为 FC 类型组件定义泛型并传递泛型参数？

你原来的代码问题是泛型参数T未提前声明作用域，直接在FC<CatProps<T>>中使用会被判定为未定义类型。要实现带泛型Props的FC类型组件，正确写法如下：

完整可运行代码示例 #

import type { FC, ReactElement } from 'react';

// 泛型Props定义保持不变
interface CatProps<T> {
  value: T
}

// 写法1：直接对齐FC类型定义声明泛型（完全符合FC类型要求）
const Cat: <T>(props: CatProps<T> & { children?: React.ReactNode }) => ReactElement | null = <T,>(props) => {
  return <h1>Hello World! 当前传入的value值为：{props.value}</h1>
}

// 写法2：通过类型别名简化泛型FC声明
type GenericFC<P = unknown> = <T>(props: P<T> & { children?: React.ReactNode }) => ReactElement | null;
const Cat2: GenericFC<CatProps> = <T,>(props) => {
  return <h1>Hello World! 当前传入的value值为：{props.value}</h1>
}

// 调用方式和你原来的写法一致，可正常传递泛型
const cat = <Cat<number> value={123} />
const cat2 = <Cat2<string> value="测试文本" />

注意要点 #

• 在.tsx文件中编写泛型箭头函数时，需要在泛型参数后加一个逗号<T,>，避免TS将尖括号识别为JSX标签导致语法报错。
• 由于FC本身是固定泛型参数的类型，无法直接绑定动态泛型T，因此需要将泛型参数声明在函数定义的最外层，才能实现调用组件时动态传递泛型给Props接口。

内容的提问来源于stack exchange，提问作者Иван Вольнов