如何映射存储在Redux主状态数组中的三种不同类型组件？

你的问题核心在于TypeScript无法自动推断联合类型数组中每个元素的具体类型，再加上当前映射代码直接返回多个同级组件（React不允许这种写法），最终导致props传递出错。下面是具体的解决方案：

核心思路：利用字面量类型实现类型守卫 #

你定义的每个接口都带有固定的字面量type属性（'a'/'b'/'c'），TypeScript会把对这个属性的相等判断当作类型守卫，自动缩小当前元素的类型范围，这样就能安全访问对应类型的专属props。

修正后的映射代码 #

这里用switch语句实现条件渲染（也可以用if-else，逻辑完全一致）：

const typesItems = types[id].map((el) => {
  // 必须添加key属性避免React列表渲染警告
  switch (el.type) {
    case 'a':
      // TypeScript此时能确定el是TypeA类型，可安全访问valueX
      return <TypeA key={el.id} id={el.id} valueX={el.valueX} />;
    case 'b':
      // 此时el是TypeB类型，可访问valueY
      return <TypeB key={el.id} id={el.id} valueY={el.valueY} />;
    case 'c':
      // 此时el是TypeC类型，可访问valueZ
      return <TypeC key={el.id} id={el.id} valueZ={el.valueZ} />;
    default:
      // 穷尽类型检查：如果以后新增类型，TypeScript会报错提醒你补充逻辑
      const _exhaustiveCheck: never = el;
      return null;
  }
});

关键细节说明 #

1. 添加key属性：React列表渲染要求每个子元素有唯一标识，用el.id刚好满足需求。
2. 穷尽类型检查：default分支里的_exhaustiveCheck是为了保障类型安全——如果以后新增TypeD这类新类型，TypeScript会因为无法将el赋值给never类型而报错，提醒你补充对应的渲染逻辑。
3. 类型自动缩小：当判断el.type === 'a'时，TypeScript会自动将el的类型从TypeA | TypeB | TypeC缩小到TypeA，此时访问el.valueX不会有类型错误。

替代方案：if-else条件判断 #

如果你更喜欢if-else写法，逻辑完全一致：

const typesItems = types[id].map((el) => {
  if (el.type === 'a') {
    return <TypeA key={el.id} id={el.id} valueX={el.valueX} />;
  } else if (el.type === 'b') {
    return <TypeB key={el.id} id={el.id} valueY={el.valueY} />;
  } else if (el.type === 'c') {
    return <TypeC key={el.id} id={el.id} valueZ={el.valueZ} />;
  } else {
    const _exhaustiveCheck: never = el;
    return null;
  }
});

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