Angular 12服务出现Cannot read 'licence_number' of undefined错误如何解决？

报错是因为service层中取值逻辑的校验不全：你仅判断了licences字段是否存在，没有校验licences数组是否为空。当后端返回的员工数据没有证件信息时，licences会是空数组，此时licences[0]为undefined，读取licence_number属性就会触发该类型错误。

可以直接用可选链运算符优化取值逻辑，Angular 12原生支持该语法，不需要额外配置：

getEmployeeById(id: number): Observable<EmployeeResponse> {
  return this.http.get('/assets/data.json').pipe(
    map((response: any) => {
      if (!response?.results?.employee) return response;

      let employee: IEmployee = {
        ...response.results.employee,
        // 用可选链安全取值，空值时默认返回空字符串，避免表单赋值异常
        licence_number: response.results.employee.licences?.[0]?.licence_number ?? ''
      };

      response.results.employee = employee;
      return response;
    })
  );
}

代码说明 #

• ?. 可选链运算符会自动判断前面的值是否为undefined/null，是的话直接终止表达式返回undefined，不会抛出错误
• ?? 空值合并运算符可以在取值为undefined/null时返回你指定的默认值，这里设置为空字符串，和表单初始值的类型保持一致，避免后续表单操作出现异常
• 前面的多层判断也可以用可选链简化为if (!response?.results?.employee)，逻辑完全一致，代码更简洁

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