React TypeScript泛型组件报错：任意类型实例化导致类型不兼容

编写了如下React泛型组件，期望传入组件及其props后一同渲染，但触发了TypeScript类型错误，出于学术研究需求，以下是问题分析和正确解决方式：

原代码 #

import { ComponentType } from 'react';

function Comp<C>({
  Component,
  ...otherProps
}: {
  Component: ComponentType<C>
} & C) {
  return <Component {...otherProps} />
}

报错信息（翻译后） #

类型“Omit<{ Component: ComponentType; } & C, "Component">”无法赋值给类型“IntrinsicAttributes & C & { children?: ReactNode; }”。
类型“Omit<{ Component: ComponentType; } & C, "Component">”无法赋值给类型“C”。
“C”可以被实例化为任意与“Omit<{ Component: ComponentType; } & C, "Component">”无关的类型。

问题原因 #

TypeScript无法推导Omit<{ Component: ComponentType<C> } & C, "Component">与C的等价性：

• 如果C本身包含Component属性，交叉类型后Omit会移除该属性，但原C的Component类型可能和传入的组件类型冲突
• TypeScript需要确保类型绝对安全，因此拒绝将Omit后的类型直接赋值给C

正确解法 #

解法1：显式排除C中的Component属性 #

通过Omit<C, 'Component'>确保传入的props中，除了Component字段外，其余都严格匹配目标组件的props类型：

import { ComponentType } from 'react';

function Comp<C>({
  Component,
  ...otherProps
}: { Component: ComponentType<C> } & Omit<C, 'Component'>) {
  return <Component {...otherProps} />;
}

解法2：类型断言（简洁但需明确场景） #

如果能确定业务场景中C不会包含Component属性，可通过类型断言告诉TypeScriptotherProps就是C类型：

import { ComponentType } from 'react';

function Comp<C>({
  Component,
  ...otherProps
}: { Component: ComponentType<C> } & C) {
  return <Component {...otherProps as C} />;
}

解法3：拆分参数定义 #

将props拆分为独立的Component字段和剩余props，让TypeScript更清晰地推导类型：

import { ComponentType } from 'react';

function Comp<C>(props: { Component: ComponentType<C> } & C) {
  const { Component, ...otherProps } = props;
  return <Component {...otherProps as C} />;
}

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