Angular提交嵌套对象POST请求报错：无法读取location属性，求助解决

错误原因分析 #

出现ERROR TypeError: Cannot read properties of undefined (reading "location")的核心原因是：传入postHotel方法的hotel对象中，geometry属性未定义或未正确初始化，导致尝试读取hotel.geometry.location时触发undefined错误。另外代码里还有一处photos字段的取值错误：后端photos是数组结构，前端直接写hotel.photos.html_attributions会报错，因为数组没有html_attributions属性。

修正步骤 #

1. 验证传入的hotel对象结构 #

调用postHotel前，确保传入的hotel对象包含完整嵌套结构，示例如下：

const hotelData = {
  name: "测试酒店",
  address: "测试地址",
  rating: "4.5",
  geometry: {
    location: {
      lat: "30.123",
      lng: "120.456"
    }
  },
  photos: [
    {
      html_attributions: ["测试图片来源"]
    }
  ]
};
this.yourService.postHotel(hotelData).subscribe(...);

2. 修正postHotel方法代码 #

添加空值判断避免报错，同时修正photos字段的取值和表单字段名：

postHotel(hotel: any) {
  let postData = new FormData();
  // 基础字段
  postData.append('name', hotel.name || '');
  postData.append('address', hotel.address || '');
  postData.append('rating', hotel.rating || '');
  
  // 处理geometry的lat/lng，添加空值判断
  if (hotel.geometry?.location) {
    postData.append('lat', hotel.geometry.location.lat || '');
    postData.append('lng', hotel.geometry.location.lng || '');
  }
  
  // 处理photos的html_attributions，匹配后端字段名
  if (hotel.photos?.length > 0 && hotel.photos[0].html_attributions?.length > 0) {
    postData.append('html_attributions', hotel.photos[0].html_attributions[0] || '');
  }

  return this.http.post('http://localhost:5000/api/v1.0/hotels', postData);
}

3. 可选：用TypeScript接口规范数据结构 #

为避免any类型带来的隐患，建议定义Hotel接口约束数据结构：

interface HotelLocation {
  lat: string;
  lng: string;
}

interface HotelGeometry {
  location: HotelLocation;
}

interface HotelPhoto {
  html_attributions: string[];
}

interface Hotel {
  name: string;
  address: string;
  rating: string;
  geometry: HotelGeometry;
  photos: HotelPhoto[];
}

将方法参数改为hotel: Hotel，编写代码时就能提前发现结构错误。

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