React与TypeScript中基于类型传递渲染组件的类型匹配问题

问题描述 #

在尝试根据contentType字段渲染对应组件并传入匹配的props时，遇到以下类型错误：

Type '{ bar: number; } | { foo: string; }' is not assignable to type 'IntrinsicAttributes & { bar: number; } & { foo: string; }'.
Property 'foo' is missing in type '{ bar: number; }' but required in type '{ foo: string; }'.

核心问题是TypeScript无法自动关联contentType、对应组件和组件props三者的关系，将props识别为所有组件props的联合类型，同时将组件识别为所有组件的联合类型，导致要求props必须满足所有组件的属性要求。

解决方案 #

方案一：使用类型断言（快速解决） #

直接通过类型断言告诉TypeScript当前props与组件是匹配的：

const Root = ({ items }: RootProps) => {
    return (
        <div>{items.map(({ contentType, props }) => {
            const Component = componentMap[contentType]
            // 断言props为当前组件的props类型
            return <Component {...props as ComponentProps<typeof Component>} />
        })}</div>
    )
}

方案二：通过分支判断收窄类型（更安全） #

创建专门的渲染函数，通过switch分支明确每个contentType对应的组件和props，让TypeScript能准确收窄类型：

const renderItem = (item: Item) => {
  switch (item.contentType) {
    case 'one':
      return <FirstComponent {...item.props} />
    case 'two':
      return <SecondComponent {...item.props} />
    default:
      // 处理未知类型，避免运行时错误
      throw new Error(`不支持的contentType: ${item.contentType}`)
  }
}

const Root = ({ items }: RootProps) => {
    return (
        <div>{items.map(renderItem)}</div>
    )
}

方案三：基于映射类型构建强关联（高扩展性） #

通过定义基础的内容类型-组件映射，自动生成Item和ComponentMap类型，确保类型间的强关联，方便后续扩展：

// 1. 定义内容类型与组件的基础映射
type ContentTypeMap = {
  one: typeof FirstComponent
  two: typeof SecondComponent
}

// 2. 自动生成Item类型
type Item = {
  [K in keyof ContentTypeMap]: {
    contentType: K
    props: ComponentProps<ContentTypeMap[K]>
  }
}[keyof ContentTypeMap]

// 3. 组件映射使用ContentTypeMap类型
const componentMap: ContentTypeMap = {
  one: FirstComponent,
  two: SecondComponent
}

// 4. 泛型渲染函数确保类型匹配
const renderItem = <K extends keyof ContentTypeMap>(item: { contentType: K; props: ComponentProps<ContentTypeMap[K]> }) => {
  const Component = componentMap[item.contentType]
  return <Component {...item.props} />
}

const Root = ({ items }: { items: Item[] }) => {
    return (
        <div>{items.map(renderItem)}</div>
    )
}

这种方式下，新增内容类型时只需修改ContentTypeMap，所有关联类型会自动更新，无需手动维护多个类型定义。

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