遍历对象时TypeScript无法匹配组件与对应Entry类型的问题

错误原因 #

在你的for循环逻辑中，elData的类型被TypeScript推断为IMap[keyof IMap]，也就是{ entry: string; comp: typeof LarenComp } | { entry: number; comp: typeof PiComp }的联合类型。由于TypeScript无法在联合类型中建立entry和comp的类型关联——它只知道comp需要的entry参数要么是string要么是number，但无法确定当前elData里的entry和comp具体对应哪一组，因此会把comp的entry参数类型推断为never（string和number的交集为空），最终抛出类型不匹配的错误。

解决方案 #

使用泛型函数处理每个映射项，让TypeScript能追踪到单个项的具体类型，从而确保entry的类型与对应组件的参数类型完全匹配。

修改后的完整代码 #

import React from 'react';

const LarenComp: React.FC<{ entry: string }> = ({ entry }) => (
    <span>
        {entry}
    </span>
)

const PiComp: React.FC<{ entry: number }> = ({ entry }) => (
    <span>
        {entry}
    </span>
)

interface IMap {
  Lauren: {
    entry: string;
    comp: typeof LarenComp;
  };
  Pi: {
    entry: number;
    comp: typeof PiComp;
  };
}

const Map: IMap = {
  Lauren: {
    entry: "Laren",
    comp: LarenComp,
  },
  Pi: {
    entry: 3.14,
    comp: PiComp,
  },
};

// 泛型函数：追踪单个映射项的具体类型
function renderItem<K extends keyof IMap>(key: K) {
  const { entry, comp: Comp } = Map[key];
  return <Comp entry={entry} />;
}

// 生成元素数组
const elements = Object.keys(Map).map(key => renderItem(key as keyof IMap));

另一种简化写法（直接遍历映射项） #

如果不想单独定义函数，也可以用Object.values结合类型断言处理：

const elements: React.ReactNode[] = [];

// 遍历映射项，通过类型断言跳过联合类型检查
(Object.values(Map) as Array<IMap[keyof IMap]>).forEach(item => {
  const Comp = item.comp;
  elements.push(<Comp entry={item.entry as never} />);
});

注：这里的as never是因为我们明确知道item.entry的类型与Comp的参数匹配，用类型断言绕过TypeScript的联合类型校验，适合简单场景。

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