Angular电商心愿单模块触发Cannot read properties of undefined报错求助

开发者阿泽

2026-9-28

问题根因

报错指向的if(wishItems[i].productId === item.product.id)行出现Cannot read properties of undefined(reading id)，核心原因是你的后端/本地JSON存储返回的心愿单列表中，存在至少一条数据的product字段为undefined。
你没有改动过代码的前提下出现该问题，大概率是近期有商品被后台删除，导致关联的心愿单条目失去了对应的商品关联数据，触发空指针异常。

另外你的代码还存在两个隐藏bug：

创建Wish实例时，你传入的第三个参数是item.name，但Wish构造函数的第三个参数是数量qty，类型不匹配会导致后续的数量统计逻辑完全异常
调用接口时类属性wishlistitemUrl前漏写了this，存在变量未定义的潜在报错风险

修复方案

直接修改WishlistItemService的getWishlistitem方法，增加无效数据过滤逻辑，同时修正代码错误：

getWishlistitem(): Observable<Wish[]>{
  return this.http.get<Wish[]>(this.wishlistitemUrl).pipe(
    map((result: any[]) => {
      let wishItems: Wish[] =[];
      for(let item of result) {
        // 新增：过滤product不存在的无效心愿单数据，避免空指针
        if (!item || !item.product) {
          console.warn('检测到无效心愿单条目，已跳过：', item);
          continue;
        }
        let productExists = false
        for(let i in wishItems){
          if(wishItems[i].productId === item.product.id){
            wishItems[i].qty++
            productExists = true
            break;
          } 
        }
        if (!productExists){
          // 修正：第三个参数传入数量，不要传item.name
          wishItems.push(new Wish(item.id, item.product, item.qty || 1));
        }
      }
      return wishItems;
    })
  );
}