Angular9构建报Cannot convert undefined or null to object如何解决

问题根因 #

• 无效的async/await使用：Angular HttpClient.get返回的是Observable类型，subscribe的成功回调本身就会在请求完全返回数据后自动触发，回调拿到的data已经是解析完成的响应体，不是Promise，额外加async/await属于无效写法，不会起到等待效果。
• 空值未做校验：流水线构建环境下，接口返回的HouseValueObject.extensiveHouseData可能为undefined/null，直接传给Object.keys就会触发你遇到的类型错误，本地环境接口返回正常所以不会报错。
• 类型定义和使用逻辑不匹配：你在HouseValueObject中将extensiveHouseData定义为HouseValue[]数组类型，但代码里却用Object.keys遍历键名，说明要么类型定义写错了（实际后端返回的是对象），要么遍历逻辑写错了（数组不需要用Object.keys）。
• 代码笔误：getHouseData方法中return.this.http多了一个.，属于语法错误。

修复方案 #

1. 移除无效的async/await写法，同时增加空值防御校验：

houseData: HouseValueObject;
houseNumber = '12345';

callHouseService() {
   this.streetHouseService.getHouseData(this.houseNumber).subscribe(
     (data) => {
       this.houseData = data;
       // 空值兜底，extensiveHouseData为空时默认传入空对象
       const targetData = this.houseData?.extensiveHouseData ?? {};
       const keys = Object.keys(targetData);
       this.extensiveHouseDataList = keys.map(k => targetData[k]);
     },
     // 新增错误回调，捕获接口异常场景
     (error) => {
       console.error('请求房屋数据失败', error);
       this.extensiveHouseDataList = [];
     }
  )
}

2. 修正类型定义和遍历逻辑的不匹配问题：
   • 如果后端返回的extensiveHouseData是键值对对象类型，修改类型定义：

   export class HouseValueObject {
      numberBathrooms: number;
      extensiveHouseData: Record<string, HouseValue>;
   }
   

   • 如果后端返回的extensiveHouseData确实是数组，直接取值即可，不需要调用Object.keys：

   this.extensiveHouseDataList = this.houseData?.extensiveHouseData ?? [];
   

3. 修正HouseService中的语法笔误：

export class HouseService {
  private readonly relativeURL = 'services/api/houseinfo/'
  
  constructor(private http: HttpClient) {}
  
  getHouseData(houseNumber: string): Observable<HouseValueObject> {
    // 移除return后面多余的.
    return this.http.get<HouseValueObject>(this.relativeURL + houseNumber + '/');
  }
}

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