修复TypeScript类型错误：P可被任意类型实例化与Omit类型不兼容

问题背景 #

需要实现一个CustomComponent，用来简化可选组件的渲染逻辑：当未传入Component时返回null，传入时则传递对应props渲染该组件，避免每次重复编写config.title ? renderTitle() : null这类代码。

使用示例 #

import React from 'react';

type TitleProps = {
  title: string;
  id: number;
  name?: string;
  phone?: string;
};

type SubTitleProps = {
  title: string;
  id: number;
  name?: string;
  phone?: string;
};

type Props = {
  config: {
    title?: React.ComponentType<TitleProps>;
    subTitle?: React.ComponentType<SubTitleProps>;
  };
};

export const App: React.FC<Props> = ({ config }) => {
  return (
    <>
      <CustomComponent<TitleProps>
        Component={config.title}
        title="Title"
        id={12345}
        name="Nick"
      />
      <CustomComponent<SubTitleProps>
        Component={config.subTitle}
        title="Title"
        id={12345}
        name="Nick"
      />
    </>
  );
};

原错误实现 #

import React from 'react';

type Props<P> = P & {
  Component: React.FC<P>;
};

export const CustomComponent = <P = Record<string, any>,>({
  Component,
  ...rest
}: Props<P>) => {
  if (!Component) return null;

// TS Error: TS2322: Type Omit<Props<P>, 'Component'> is not assignable to type IntrinsicAttributes & P
// Type Omit<Props<P>, 'Component'> is not assignable to type P
// P could be instantiated with an arbitrary type which could be unrelated to Omit<Props<P>, 'Component'>
return <Component {...rest} />;
};

修复方案 #

问题出在类型定义上：Props<P> 使用了交叉类型 P & { Component: React.FC<P> }，TypeScript 无法确定 Omit<Props<P>, 'Component'> 完全等同于 P（因为 P 可能本身包含 Component 属性）。同时原定义中 Component 是必填的，但实际使用时需要支持可选传入。

调整类型定义，将 Component 单独作为可选属性，其余 props 对应泛型 P：

import React from 'react';

// 定义组件 props：可选的 Component，加上目标组件需要的所有 props P
type CustomComponentProps<P> = {
  Component?: React.ComponentType<P>;
} & P;

export const CustomComponent = <P extends Record<string, unknown>>({
  Component,
  ...restProps
}: CustomComponentProps<P>) => {
  // 未传入 Component 时返回 null
  if (!Component) return null;
  
  // 传入 Component 时，将剩余 props 传递给它
  return <Component {...restProps} />;
};

修复说明 #

1. 类型定义优化：CustomComponentProps<P> 明确区分了可选的 Component 属性和目标组件需要的 P 类型 props，TypeScript 可以直接推断 restProps 就是 P 类型，解决了类型不匹配的问题。
2. 支持可选Component：将 Component 设为可选属性，匹配使用示例中传入可选组件的场景，不需要额外处理 undefined 传入的情况。
3. 泛型约束：给泛型 P 添加 extends Record<string, unknown> 约束，避免传入非对象类型的无效泛型。

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