如何在React组件的哈希映射/字典中实现类型收窄？

我想避开条件代码块，只通过哈希映射/字典实现类型收窄。我的组件接收来自同一数据源的混合数据结构，不同组件负责渲染不同视觉变体，数据里的category字段用来指定对应的渲染组件。

类型与组件示例 #

enum Category {
  "Foo",
  "Bar"
}

type Card = {
  category: Category.Foo,
  message: string;
} | {
  category: Category.Bar,
  active: boolean;
}

const CardCategoryFoo = ({ data }: { data: Extract<Card, { category: Category.Foo }> }) => 
  <div>Foo: {data.message}</div>;

const CardCategoryBar = ({ data }: { data: Extract<Card, { category: Category.Bar }> }) => 
  <div>Bar: {data.active ? "Active" : "Inactive"}</div>;

条件判断实现类型收窄（可行） #

// 类型收窄生效的场景
const Page1 = ({ data }: { data: Card }) => {
  if (data.category === Category.Foo) {
    return <CardCategoryFoo data={data} />;
  }

  if (data.category === Category.Bar) {
    return <CardCategoryBar data={data} />;
  }

  return null;
}

哈希映射尝试失败场景 #

// 类型收窄失效的场景
const Page2 = ({ data }: { data: Card }) => {
  const cardDictionary = {
    [Category.Foo]: <CardCategoryFoo data={data} />,
                                  // ^ TypeScript报错
    [Category.Bar]: <CardCategoryBar data={data} />,
                                  // ^ TypeScript报错
  };

  return cardDictionary[data.category] ?? null;
}

能否通过简单方案继续使用哈希映射解决该问题？

替代方案调研 #

调研后发现简单方案可能无法满足需求（相关TypeScript官方Issue）。其中一种方案是使用类型断言，但我不想每次都依赖as Something语法。

那么覆盖所有场景的最佳实践模式是什么？继续用if/else条件判断？还是改用switch语句？此场景下的最佳建议是什么？

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