React TypeScript联合类型报错：已声明属性仍提示不存在

你遇到的是TypeScript联合类型的类型收窄问题：虽然你的Props是带判别式type的联合类型，但TypeScript无法自动通过外层的type直接关联内层obj的结构，必须显式做类型收窄才能让编译器识别当前的具体类型分支。

解决方法1：用条件判断做内置类型守卫 #

在组件或函数内部，通过检查type属性的值，让TypeScript自动收窄类型：

function MyComponent(props: Props) {
  if (props.type === "second") {
    // 此时TypeScript已将props收窄为第二个联合分支，可安全访问obj.anotherKey
    return <div>{props.obj.anotherKey}</div>;
  }
  // 处理type="first"的逻辑
  return <div>{props.obj.someKey}</div>;
}

当你判断props.type === "second"时，TypeScript会自动推断当前props属于联合类型的第二个分支，对应的obj结构也会被正确识别，不会再出现属性不存在的报错。

解决方法2：自定义类型守卫函数 #

如果需要在多个地方复用类型判断逻辑，可以封装一个自定义类型守卫：

// 定义类型守卫函数，明确返回类型为类型断言
function isSecondType(props: Props): props is {
  type: "second";
  obj: { someKey: string; anotherKey: string };
} {
  return props.type === "second";
}

// 使用示例
function handleProps(props: Props) {
  if (isSecondType(props)) {
    console.log(props.obj.anotherKey); // 无类型报错
  }
}

注意事项 #

尽量避免使用类型断言（比如(props as {type: "second"}).obj.anotherKey），这种方式会跳过TypeScript的类型检查，一旦业务逻辑出错，容易引发运行时问题。优先通过类型守卫实现安全的类型收窄。

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