React-google-places-autocomplete中street_address字段获取失败求助

问题原因 #

Google Geocoding API中，street_address是完整街道地址的顶级类型，只有当返回的Place对象本身代表一个精确到门牌号的单一完整地址条目时，才会包含这个类型的组件。绝大多数场景下，街道地址会被拆分为street_number（门牌号）和route（道路名称）两个独立的address component类型，不会出现street_address类型，这就是你拿到undefined的核心原因。

修复方案 #

修改地址组件的处理逻辑，通过合并street_number和route来拼接完整街道地址：

let address_components = {
  street_address: '' // 初始化街道地址字段
};
for (var i = 0; i < place[0].address_components.length; i++) {
  var addressType = place[0].address_components[i].types[0];
  switch (addressType) {
    case 'postal_code':
      address_components.postal_code = place[0].address_components[i].short_name;
      break;
    case 'street_number':
      // 拼接门牌号到街道地址
      address_components.street_address += place[0].address_components[i].short_name + ' ';
      break;
    case 'route':
      // 拼接路名到街道地址
      address_components.street_address += place[0].address_components[i].long_name;
      break;
    case 'administrative_area_level_1':
      address_components.administrative_area_level_1 = place[0].address_components[i].short_name;
      break;
    case 'locality':
      address_components.locality = place[0].address_components[i].short_name;
      break;
  }
  // 去除首尾多余空格
  address_components.street_address = address_components.street_address.trim();
}
// 将日志输出移到循环外，避免重复打印
console.log(address_components.street_address)
console.log(address_components.locality)
console.log(address_components.administrative_area_level_1)
console.log(address_components.postal_code);
console.log(lat)
console.log(lng)

地址自动填充替代方案 #

• 直接使用Autocomplete返回的Place详情：react-google-places-autocomplete的onChange事件可直接获取完整Place对象，无需额外调用geocodeByAddress，减少API请求开销：

  onChange: async (value, { place }) => {
    setLocation(value);
    if (place) {
      const { lat, lng } = await getLatLng(place);
      let address_components = { street_address: '' };
      // 复用上述address_components处理逻辑
      // ...
      const searchedAddress = { address: value, lat, lng };
      SaveLocation(searchedAddress);
    }
  }
  

• 原生Google Places API集成：直接使用Google Places JavaScript API的Autocomplete控件，手动处理地址解析，灵活性更高。
• 轻量第三方库替代：比如react-places-autocomplete（轻量封装）、@react-google-maps/api（官方React封装），均支持地址自动完成与解析功能。

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