已做空值判断仍提示Object is possibly 'undefined'的原因及解决方法

我定义了如下状态：

const [data, setData] = useState<{ [key in PROJECT_ROLE]?: number[] } | null>(null);

其中data是包含PROJECT_ROLE中部分键的对象。

PROJECT_ROLE枚举定义如下：

export enum PROJECT_ROLE {
  OWNER = "OWNER",
  SUPERVISOR = "SUPERVISOR",
  QA = "QA",
  LAST_CHECK = "LAST_CHECK",
  CHECKER = "CHECKER",
  ENTRY = "ENTRY",
  MEMBER = "MEMBER",
}

我编写了如下处理函数：

const handle = (index: number, role: PROJECT_ROLE) => {
  if (data && data[role]) {
    const id = data[role].indexOf(index);
  }
};

但仍收到错误提示：Object is possibly 'undefined'。明明已经在if中做了空值判断，为何还会出现该错误？该如何解决？

TypeScript的类型守卫存在局限性：当通过动态键（这里的role是变量）访问对象属性时，即便你在if条件里判断了data[role]存在，TypeScript也无法确保后续代码中该属性的类型不会发生变更（比如异步操作修改data），因此不会将data[role]的类型从number[] | undefined缩小为number[]。

有三种可行方案：

• 方案1：存入临时变量
  将data[role]赋值给临时变量，TypeScript能正确识别变量的类型：

  const handle = (index: number, role: PROJECT_ROLE) => {
    if (data) {
      const roleData = data[role];
      if (roleData) {
        const id = roleData.indexOf(index);
      }
    }
  };
  

• 方案2：使用非空断言运算符（!）
  若能确保if判断后data[role]一定存在，可通过非空断言告知TypeScript忽略undefined可能性：

  const handle = (index: number, role: PROJECT_ROLE) => {
    if (data && data[role]) {
      const id = data[role]!.indexOf(index);
    }
  };
  

  注意：非空断言需谨慎使用，若判断逻辑有误，运行时可能抛出错误。

• 方案3：可选链运算符结合空值处理
  用可选链简化代码，同时避免运行时错误：

  const handle = (index: number, role: PROJECT_ROLE) => {
    const id = data?.[role]?.indexOf(index);
    // 可根据业务逻辑处理id为undefined的情况
  };
  

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