React TypeScript 联合类型组件场景下如何定义类型避免传参报错

你碰到的类型报错，是TypeScript针对联合类型组件的固有推导规则导致的：
当Component的类型是多个组件的联合（比如typeof A | typeof B）时，TS在编译阶段根本没法知道运行时实际拿到的是A还是B，因此会自动对传入的props做交叉类型推导——也就是要求你传的props必须同时满足所有组件的入参要求，只要有一个组件的必填参数没传，就会触发校验报错。
如果后续switchFunc里加更多分支、返回更多入参不同的组件，这个校验要求会越来越严格，甚至出现你明明传的props和当前运行时的组件完全匹配，TS依然报错的情况。

方案一：类型映射法（类型安全度最高，推荐长期维护使用） #

这个方法从根源上把「组件类型」和「对应需要的props类型」做绑定，彻底绕开TS对联合组件的交叉props推导问题：

• 先定义统一的组件映射表，把所有可能返回的组件和它对应的props做一一关联：

  type ComponentConfig = {
    A: { component: typeof A; props: React.ComponentProps<typeof A> },
    B: { component: typeof B; props: React.ComponentProps<typeof B> }
  }
  

• 改造switchFunc的返回值，不再直接返回组件本身，而是返回「组件+匹配好的props」的结构，明确返回类型：

  const switchFunc = (num: number): ComponentConfig[keyof ComponentConfig] => {
    if (num > 0.5) {
      return {
        component: A,
        props: { a: 'hello' }
      }
    }
    return {
      component: B,
      props: { a: 'hi', c: 1 }
    }
  }
  

• 渲染时直接解构出组件和对应的props，不需要手动维护组件和props的匹配关系，TS会全程做类型校验：

  export default function App() {
    const condition = Math.random()
    const { component: DynamicComp, props } = switchFunc(condition)
    return <DynamicComp {...props} />
  }
  

后续如果要新增分支组件，只需要在ComponentConfig里加对应的映射项，在switchFunc里加对应分支即可，完全不会触发联合类型的props交叉推导问题。

方案二：可选props适配法（改动最小，适合快速适配老代码） #

如果因为老代码结构限制，没法改造switchFunc的返回值（它必须直接返回联合类型的组件），可以把所有组件的props合并成一个结构，把非共有的必填属性改成可选，绕开TS的交叉推导要求：

• 把原来的两个组件的props合并成一个兼容结构，非共有属性标记为可选：

  type CombinedProps = { a: string; c?: number }
  

• 渲染时，把联合类型的Component断言成接收这个合并props的组件类型，注意不要直接用any丢失所有类型校验：

  const renderContent = (props: CombinedProps) => {
    const Component = switchFunc(condition) as React.FC<CombinedProps>
    return (
      <div>
        <Component {...props} />
      </div>
    )
  }
  

• 调用时传入的props根据条件拼接即可，TS不会再要求你必须同时传所有组件的必填属性：

  return (
    <div className="App">
      {renderContent(condition > 0.5 ? { a: 'hello' } : { a: 'hi', c: 1 })}
    </div>
  )
  

注意：这个方案的类型安全度比映射法稍低，只适合分支少、props结构差异不大的场景；如果组件分支很多、props差异大，不建议长期用这个方案，避免类型校验丢失。

避坑提醒 #

千万不要图省事把组件直接断言成React.FC<any>，虽然可以快速消掉报错，但会完全丢失props的类型校验能力，后续传错props、打错属性名都不会有TS提示，维护成本极高。

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