React/TypeScript中如何按数组项类型为子组件传递对应日期prop

针对你遇到的React/TypeScript类型联合数组的日期字段传递问题，以下是几种简洁且类型安全的实现方式，无需重复编写JSX也不用依赖类型断言：

方案1：类型守卫 + 统一日期提取函数 #

先通过类型守卫区分不同类型的数组项，再用一个函数统一提取对应日期字段，渲染时直接调用函数即可：

// 定义你的基础类型
type ItemOne = {
  // 建议添加type标记字段，方便类型区分（可选但推荐）
  type: 'itemOne';
  createdDate: Date;
  // 其他业务字段
};

type ItemTwo = {
  type: 'itemTwo';
  broadcastDate: Date;
  // 其他业务字段
};

type UnionItem = ItemOne | ItemTwo;

// 类型守卫函数，用于窄化类型
function isItemOne(item: UnionItem): item is ItemOne {
  return item.type === 'itemOne';
}

// 统一提取日期的工具函数
const getTargetDate = (item: UnionItem): Date => {
  return isItemOne(item) ? item.createdDate : item.broadcastDate;
};

// 父组件渲染逻辑
function ParentComponent() {
  const items: UnionItem[] = [/* 你的数组数据 */];

  return (
    <div className="item-list">
      {items.map((item, idx) => (
        <Item key={idx} date={getTargetDate(item)} />
      ))}
    </div>
  );
}

如果你的类型没有type标记字段，也可以用in操作符实现类型守卫：

function isItemOne(item: UnionItem): item is ItemOne {
  return 'createdDate' in item;
}

方案2：直接利用类型窄化简化逻辑 #

如果逻辑简单，甚至可以不用单独写类型守卫，直接在提取函数里用in操作符做类型判断，代码更紧凑：

const getTargetDate = (item: UnionItem): Date => {
  return 'createdDate' in item ? item.createdDate : item.broadcastDate;
};

这种写法同样能让TypeScript自动窄化类型，无需类型断言，渲染时调用函数即可。

方案3：可扩展的字段映射方案（适合未来新增类型） #

如果后续可能添加更多带不同日期字段的类型，推荐用字段映射表来统一管理，扩展性更强：

// 定义类型与日期字段的映射
type DateFieldMap = {
  ItemOne: 'createdDate';
  ItemTwo: 'broadcastDate';
  // 新增类型时只需在这里添加对应字段
};

// 基于映射生成联合类型
type UnionItem = {
  [K in keyof DateFieldMap]: {
    type: K;
    [F in DateFieldMap[K]]: Date;
  };
}[keyof DateFieldMap];

// 统一日期提取函数
const getTargetDate = (item: UnionItem): Date => {
  return item[DateFieldMap[item.type]] as Date;
};

新增类型时，只需要在DateFieldMap中添加一行映射关系，无需修改其他逻辑。

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