如何正确标注带泛型Props的React TypeScript函数组件类型

算力阿峰

2026-8-22

React TypeScript 泛型组件类型标注解决方案

基础问题解决：正确的组件标注方式

你不需要给组件变量标注FunctionComponent类型，直接将组件定义为泛型函数，并通过PropsWithChildren<FooProps<T>>包裹props类型即可——这样既自动包含了children属性，又能让泛型T正常工作：

import { PropsWithChildren } from 'react';

// 你的泛型Props类型
type FooProps<T> = {
  bar: T;
  // 其他自定义属性
};

// 正确的泛型组件定义
const Foo = <T,>(props: PropsWithChildren<FooProps<T>>) => {
  // 组件逻辑示例
  return (
    <div>
      {props.children}
      <p>Bar的类型：{typeof props.bar}</p>
    </div>
  );
};

之前写法报错的原因

第一种写法中，变量标注的FunctionComponent<PropsWithChildren<FooProps<T>>>里的T未被声明——T是组件函数的泛型参数，无法直接在外部变量的类型标注中使用。
第二种写法中，FooProps是泛型类型，必须传入类型参数，单独使用FooProps会触发参数缺失的报错。

后续问题：让泛型T完整贯穿的类型标注

如果想要手动明确标注组件的泛型类型（而非依赖TS自动推断），可以自定义泛型组件类型，替代默认的FunctionComponent（因为FunctionComponent的泛型仅针对固定props类型，无法适配组件本身的泛型参数）：

import { PropsWithChildren, JSX } from 'react';

type FooProps<T> = {
  bar: T;
};

// 自定义泛型组件类型：组件本身是接收泛型T的函数
type GenericFooComponent = <T>(props: PropsWithChildren<FooProps<T>>) => JSX.Element;

// 使用自定义类型标注组件
const Foo: GenericFooComponent = <T,>(props) => {
  return <div>{props.children}</div>;
};

这种方式下，泛型T会完整贯穿组件的props和类型定义，类型检查完全生效。