TypeScript运行时未知类型时如何安全访问联合类型属性？

你遇到的是TypeScript联合类型索引访问的典型问题：当用字符串类型变量索引联合类型对象时，TS无法确认该字符串是当前对象类型的有效键，因此抛出类型错误。以下是几种类型安全的解决方法：

方案1：自定义类型守卫（推荐，保留完整类型安全） #

创建类型守卫函数，在运行时验证value是否为当前propsTitles的有效键，同时在编译时让TS识别该值的合法性：

// 定义类型守卫函数
function isValidNavKey(
  value: string,
  navObj: NAV_BAR_CRISIS_TYPE | NAV_BAR_OTHER_ACTIVITIES_TYPE | NAV_BAR_VOLUNTEER_TYPE
): value is keyof typeof navObj {
  return Object.prototype.hasOwnProperty.call(navObj, value);
}

在组件中使用该守卫：

<BottomNavigationAction
  showLabel
  label={typeof value === 'string' && isValidNavKey(value, propsTitles) && propsTitles[value]}
  value={value}
  className={clsx("nav_bar_item", `nav_bar_${String(value)}`, { nav_bar_item_active: isActive })}
  icon={
    <img
      className="nav_bar_icon"
      src={src}
      alt={String(value)}
    />
  }
  onClick={() => onClick(value)}
/>

原理：类型守卫会在运行时校验value是否属于当前对象的键，并在编译时告知TS：当守卫返回true时，value就是该对象的有效键，从而允许安全访问属性。

方案2：从源头约束value的类型 #

如果value是你可控的变量（比如组件状态、函数参数），可以提前将其类型约束为所有导航键的联合类型：

// 整合所有可能的导航键类型
type NavBarAllKeys = 
  | keyof NAV_BAR_CRISIS_TYPE 
  | keyof NAV_BAR_VOLUNTEER_TYPE 
  | keyof NAV_BAR_OTHER_ACTIVITIES_TYPE;

// 将value的类型定义为NavBarAllKeys（示例）
const value: NavBarAllKeys = "details";

之后直接访问propsTitles[value]时，TS会自动验证value是联合类型中至少一个成员的有效键，不会报错。如果value是外部传入的字符串，仍需通过方案1的类型守卫转换为NavBarAllKeys类型后再使用。

方案3：临时类型断言（不推荐，牺牲类型安全） #

如果能完全保证value是有效键，可以用类型断言快速跳过TS检查，但会丢失类型校验能力：

label={typeof value === 'string' && propsTitles[value as keyof (typeof propsTitles)]}

注意：若value不是有效键，运行时会返回undefined，仅在你能100%确保value合法性的场景下使用。

内容的提问来源于stack exchange，提问作者בר מאור