React TypeScript 报TS2332：动态渲染不同Props子组件时联合类型不兼容

你当前的类型定义存在两个核心问题，直接触发了TS对联合类型的错误解析：

• 给组件映射对象加了宽泛的字符串索引签名[key: string]: React.ComponentType<ComponentAProps> | React.ComponentType<ComponentBProps>，相当于告诉TS：任意字符串键取到的组件，都可能是A或B中的任意一种。
• 根据TS的函数类型兼容规则，联合函数类型的参数要求是所有成员函数参数的交集。因此当你取出联合类型的组件直接调用时，TS会要求传入的props同时满足ComponentA和ComponentB的所有必填属性，最终形成了需要同时兼容两类Props的交叉类型，自然会报缺少另一个组件必填属性的错误。

无需把所有Props设为可选，只要通过强类型绑定组件键、对应组件、对应Props的映射关系，配合TS的类型收窄能力，就能实现精准的类型检查：

• 移除组件映射的宽泛字符串索引签名，让每个组件键直接绑定唯一的组件类型，避免TS对组件类型做无依据的联合推断。
• 将传入的组件标识type的类型限定为组件映射的合法键值，禁止传入任意字符串。
• 渲染前根据type值做分支判断，让TS能把每个分支的组件和对应Props做精准匹配，打散联合类型的交叉检查逻辑。

// 1. 定义强类型组件映射，不写宽泛索引签名
const comps = {
  compA: ComponentA,
  compB: ComponentB
} as const;

// 2. 定义入参的联合类型，绑定「组件标识+对应Props」的关联关系
type DynamicComponentInput = 
  | { type: 'compA' } & ComponentAProps
  | { type: 'compB' } & ComponentBProps;

// 3. 动态渲染时通过type分支做类型收窄
export function DynamicComponentRenderer(props: DynamicComponentInput) {
  // 根据type提取对应组件，TS会自动对每个分支做单独的类型检查
  switch (props.type) {
    case 'compA': {
      const RenderChild = comps.compA;
      // 此处childProps的类型会自动推断为ComponentAProps，无交叉类型问题
      const { type: _, ...childProps } = props;
      return <RenderChild {...childProps} />
    }
    case 'compB': {
      const RenderChild = comps.compB;
      const { type: _, ...childProps } = props;
      // 此处childProps的类型会自动推断为ComponentBProps
      return <RenderChild {...childProps} />
    }
  }
}

注意：TS 目前的类型系统不支持对未收窄的联合类型组件，自动匹配联合类型的Props——也就是你写的const ChildComponent = comps[type]这种直接取值的写法，TS始终会把ChildComponent的类型解析为所有组件类型的联合，进而触发props的交叉检查。必须通过分支判断把每个组件对应的类型逻辑拆开，才能实现零可选值改动的精准类型校验。

内容的提问来源于stack exchange，提问作者Andrés Root