TypeScript React中如何校验作为Props传入的组件类型？

问题场景 #

在TypeScript React开发中，需要实现容器组件仅接收指定类型的组件/元素作为Props的编译期类型校验，但常规写法无法生效。例如：

目标组件定义 #

type DummyProps = {
  name: string;
};

const Dummy = ({ name }: DummyProps) => {
  return <div>{name}</div>;
};

容器组件（无效写法） #

type DummyWrapperProps = {
  dummy: React.ReactElement<typeof Dummy>;
};

const DummyWrapper = ({ dummy }: DummyWrapperProps) => {
  return <div>{dummy}</div>;
};

调用时的问题 #

即使指定了类型，仍可传入任意React元素而不触发类型报错：

const dummyElement = <Dummy name='dummy' />;
const otherElement = <Other />; // 其他无关组件

<DummyWrapper dummy={dummyElement} />; // 合法
<DummyWrapper dummy={otherElement} />; // 本应报错，但实际无提示

原因分析 #

所有JSX元素最终都会被编译为React.ReactElement类型，默认情况下TypeScript不会细化其内部关联的组件类型，必须显式约束元素的Props或组件本身的类型才能触发校验。

解决方案 #

方案1：约束传入组件本身（而非渲染后的元素） #

如果容器组件需要接管目标组件的Props传递，可直接约束传入的组件类型为符合目标Props的组件：

type DummyWrapperProps = {
  // 约束传入组件必须接受DummyProps类型的参数
  dummyComponent: React.ComponentType<DummyProps>;
};

const DummyWrapper = ({ dummyComponent: DummyComponent }: DummyWrapperProps) => {
  // 容器可控制传入组件的Props
  return <DummyComponent name="wrapper-provided" />;
};

// 合法用法
const OtherWithMatchingProps = ({ name }: DummyProps) => <div>{name}</div>;
<DummyWrapper dummyComponent={Dummy} />;
<DummyWrapper dummyComponent={OtherWithMatchingProps} />; // Props匹配则允许

// 非法用法：组件Props不匹配，TypeScript直接报错
const Other = () => <div>Other</div>;
<DummyWrapper dummyComponent={Other} />;

方案2：约束传入渲染后的元素（严格校验Props） #

如果必须接收渲染好的元素，可通过React.ReactElement的泛型参数指定目标Props类型，间接限制元素来源：

type DummyWrapperProps = {
  // 仅接受Props为DummyProps的React元素
  dummy: React.ReactElement<DummyProps>;
};

const DummyWrapper = ({ dummy }: DummyWrapperProps) => {
  return <div>{dummy}</div>;
};

// 合法用法
const validElement = <Dummy name="valid" />;
<DummyWrapper dummy={validElement} />;

// 非法用法1：元素Props不匹配，触发报错
const otherElement = <Other />;
<DummyWrapper dummy={otherElement} />;

// 非法用法2：目标组件缺少必填Props，本身就会报错
const invalidDummyElement = <Dummy />;
<DummyWrapper dummy={invalidDummyElement} />;

方案3：严格限制仅传入指定组件（而非Props匹配的组件） #

如果需要绝对确保传入的是某一特定组件（而非任意Props匹配的组件），可给目标组件添加唯一标识，通过类型守卫实现：

// 给Dummy组件添加唯一标识属性
const Dummy = ({ name }: DummyProps) => {
  return <div>{name}</div>;
};
Dummy.isDummy = true;

// 定义仅接受Dummy组件的类型
type ExactDummyComponentType = typeof Dummy;

type DummyWrapperProps = {
  dummyComponent: ExactDummyComponentType;
};

const DummyWrapper = ({ dummyComponent: DummyComponent }: DummyWrapperProps) => {
  return <DummyComponent name="test" />;
};

// 合法用法
<DummyWrapper dummyComponent={Dummy} />;

// 非法用法：其他组件无唯一标识，触发报错
const Other = () => <div>Other</div>;
<DummyWrapper dummyComponent={Other} />;

扩展：children的类型校验 #

上述方案同样适用于children的约束，例如：

type DummyWrapperProps = {
  children: React.ReactElement<DummyProps> | React.ReactElement<DummyProps>[];
};

const DummyWrapper = ({ children }: DummyWrapperProps) => {
  return <div>{children}</div>;
};

// 合法用法
<DummyWrapper>
  <Dummy name="child1" />
  <Dummy name="child2" />
</DummyWrapper>;

// 非法用法：传入非目标组件触发报错
<DummyWrapper>
  <Other />
</DummyWrapper>;

总结 #

• 若仅需约束Props结构，使用React.ComponentType<PropsType>（传组件）或React.ReactElement<PropsType>（传元素）即可满足编译期校验。
• 若需严格限定为某一特定组件，通过给组件添加唯一标识属性来实现精确类型约束。

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