TypeScript联合类型映射React组件类型不匹配问题（React示例）

你遇到的类型不匹配问题本质是TypeScript函数参数类型逆变的特性导致的：

• 你最初给SLIDES_MAP定义的类型要求所有注册组件都必须接收slide为三种类型联合的宽泛SlideType参数，也就是组件理论上要能处理所有种类的幻灯片
• 但你的具体业务组件只接收某一种窄类型的slide，相当于把入参范围缩小了，TypeScript会判定这种赋值不安全——毕竟按照原类型定义，给SomeSlideComponent传入slide为SomeOtherSlideType的参数应该是合法的，但组件根本处理不了这种场景，自然会抛错。

通过泛型重构基础类型+映射类型生成组件映射表的精准类型，就能彻底解决这个问题，同时保留完整的类型提示，还能获得新增类型的自动校验能力。

1. 重构基础类型 #

先抽离所有幻灯片内容的联合类型，把原SlideType改造成支持传入具体子类型的泛型结构：

// 抽离所有幻灯片内容的联合类型
type AllSlideContent = SomeSlideType | SomeOtherSlideType | AndAnotherSlideType;

// 泛型化SlideType，默认返回全量联合类型，传入具体子类型时自动收窄slide字段
type SlideType<T extends AllSlideContent = AllSlideContent> = {
  sys: { id: string };
  nextSlide: { id: string };
  slide: T;
};

2. 定义组件映射表的精准类型 #

通过映射类型遍历所有幻灯片的type值，给每个type对应的组件匹配精准收窄后的props类型：

type SlideComponentMap = {
  [K in AllSlideContent['type']]: (props: SlideType<Extract<AllSlideContent, { type: K }>>) => JSX.Element;
};

这里的Extract<AllSlideContent, { type: K }>会自动从联合类型中筛选出type匹配当前key的具体幻灯片类型，比如key为SomeSlide时，自动推导出来的props类型就是SlideType<SomeSlideType>，和你的业务组件入参完全匹配。

3. 实现组件映射表 #

用上面定义的SlideComponentMap作为映射表的类型，注册组件时不会再报类型不匹配错误：

const SLIDES_MAP: SlideComponentMap = {
  SomeSlide: SomeSlideComponent,
  SomeOtherSlide: SomeOtherSlideComponent,
  AndAnotherSlide: AndAnotherSlideComponent
};

额外收益：后续新增幻灯片类型时，只要把新类型加入AllSlideContent联合，TypeScript会自动检查SLIDES_MAP是否缺少对应组件的注册，漏写会直接抛错，避免漏注册的运行时问题。

4. 改造渲染逻辑 #

在通用Slide渲染组件中做安全的类型关联，保证传入组件的props类型匹配：

interface ISlideProps {
  slideData: SlideType;
}

const Slide = ({ slideData }: ISlideProps) => {
  // 根据当前幻灯片type取出对应组件，关联对应props类型
  const RenderSlide = SLIDES_MAP[slideData.slide.type] as 
    (props: SlideType<typeof slideData.slide>) => JSX.Element;

  if (!RenderSlide) return null;

  // 直接展开props即可，完全类型匹配
  return <RenderSlide {...slideData} />;
};

外层的列表渲染逻辑不需要改动，保持原来的写法即可。

5. 业务组件写法 #

单个幻灯片组件直接用收窄后的泛型SlideType作为props类型，不需要自己写交叉类型，就能获得完整的类型提示：

const SomeSlideComponent = ({
  slide,
  nextSlide,
  sys,
}: SlideType<SomeSlideType>) => (
  <h1>
    {/* 这里输入slide.时TS会自动提示label、headline字段，不存在属性会直接报红 */}
    {slide.headline}
  </h1>
);

export default SomeSlideComponent;

• 完全移除冗长的if/else分支判断，后续新增幻灯片类型只需要加类型定义、写对应组件、在映射表注册即可，维护成本极低
• 所有位置都有完整的TypeScript类型提示，不需要额外写any或者硬类型断言
• 类型校验覆盖全链路：漏注册组件、组件props写错、访问slide不存在的属性都会被TS提前捕获

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