React+TypeScript泛型组件传参报错：IntrinsicAttributes类型不兼容

首先是基础类型定义与组件代码：

type StringKeys<T> = {
  [K in keyof T]: T[K] extends string ? K : never;
}[keyof T];

type BaseProps = {
  width?: number;
  height?: number;
}

type StringVersion = BaseProps & {
  data: string[];
  displayKey: never;
}

type ObjectVersion<TData> = BaseProps & {
  data: Pick<TData, StringKeys<TData>>[];
  displayKey: StringKeys<TData>
}

type Combo<TData = void> = TData extends Record<string, unknown> ? ObjectVersion<TData> : StringVersion;

const BaseComponent = <TData,>(props: Combo<TData>) => (
  <>base stuff</>
);

1. 直接展开props可正常运行 #

type WrapperProps<TData> = Combo<TData> & {};

const WorkingWrapper = <TData,>(props: WrapperProps<TData>) => {
  return <BaseComponent<TData> {...props} />
}

2. 修改props属性后传递时报错 #

type WrapperProps<TData> = Combo<TData> & {};

const WrapperComponent = <TData,>(props: WrapperProps<TData>) => {
  const { width } = props;
  const myWidth = width! + 1;
  return (
    <div style={{width: myWidth}}>
      <BaseComponent<TData> {...props} width={myWidth} />
     // ^----------^ error
    </div>
  )
}

错误信息：

Type 'Combo<TData> & { width: number; }' is not assignable to type 'IntrinsicAttributes & Combo<TData>'.
  Type 'Combo<TData> & { width: number; }' is not assignable to type 'IntrinsicAttributes'.(2322)

3. 解构props拆分传递也报错 #

type WrapperProps<TData> = Combo<TData> & {};

const DestructuringWrapperComponent = <TData,>({ width, ...props}: WrapperProps<TData>) => {
  return (
    <div style={{width}}>
      <BaseComponent<TData> width={width} {...props} />
    // ^----------^ error
    </div>
  )
}

错误信息：

Type '{ width: number | undefined; } & Omit<WrapperProps<TData>, "width">' is not assignable to type 'IntrinsicAttributes & Combo<TData>'.
  Type '{ width: number | undefined; } & Omit<WrapperProps<TData>, "width">' is not assignable to type 'Combo<TData>'.(2322)

核心疑问：为何直接展开props符合React类型要求，拆分传递属性时就触发IntrinsicAttributes类型不兼容错误？

这本质是TypeScript处理条件类型分配性与交叉类型兼容性的限制，结合React组件props检查逻辑导致的：

1. 直接展开props的类型兼容性 #

直接传递{...props}时，TypeScript会将props的类型直接匹配Combo<TData>——因为WrapperProps<TData>就是Combo<TData>的空交叉（& {}不改变原类型），此时TypeScript能直接确认props完全符合目标结构，无需额外拆分检查。

2. 拆分传递时的类型冲突 #

拆分属性传递时，TypeScript会把传入的props解析为两个独立类型的交叉：

• 单独传递的width（类型为number或number | undefined）
• 剩余的Omit<WrapperProps<TData>, "width">

而Combo<TData>是条件类型，会根据TData的类型分支为StringVersion或ObjectVersion。TypeScript无法自动证明{ width: ... } & Omit<...>和条件类型Combo<TData>等价——条件类型的分支结果是动态的，TypeScript对交叉类型与条件类型的兼容性检查非常严格，无法推导出两者结构完全一致。

关键细节：never类型的干扰 #

StringVersion中displayKey被设为never类型，拆分传递时，剩余props中可能包含displayKey（即使它是never），TypeScript无法确认单独传递的属性加剩余props后，是否满足Combo<TData>对displayKey的约束（比如StringVersion中displayKey必须是never，不能有实际值），这种不确定性导致类型检查失败。

3. 错误信息的误导 #

报错里的IntrinsicAttributes是React组件的基础props类型，当TypeScript无法将传入props匹配到目标组件的props类型时，会退而检查是否符合IntrinsicAttributes（比如key这类所有组件都能接受的属性），显然你的props不符合，所以抛出这个看似无关的错误，本质还是目标类型Combo<TData>的匹配失败。

方案1：重新构造完整props对象 #

把修改后的属性和剩余props合并成完整对象后再传递：

const WrapperComponent = <TData,>(props: WrapperProps<TData>) => {
  const { width } = props;
  const myWidth = width! + 1;
  const newProps = { ...props, width: myWidth };
  return (
    <div style={{width: myWidth}}>
      <BaseComponent<TData> {...newProps} />
    </div>
  )
}

方案2：使用类型断言 #

若能确认拆分传递的props完全符合Combo<TData>，可通过类型断言跳过检查：

const DestructuringWrapperComponent = <TData,>({ width, ...props}: WrapperProps<TData>) => {
  return (
    <div style={{width}}>
      <BaseComponent<TData> {...{ width, ...props } as Combo<TData>} />
    </div>
  )
}

方案3：优化Combo类型定义 #

改用联合类型+明确分支，让TypeScript更容易推断类型兼容性：

type Combo<TData = void> = 
  (TData extends Record<string, unknown> ? ObjectVersion<TData> : never) | 
  (TData extends void ? StringVersion : never);

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