React集成Google Maps路线API报destination lat非数字错误

问题现象 #

开发路线导航功能时，获取经纬度调用路线规划接口触发如下错误：

InvalidValueError: in property destination: not a string; and not a LatLng or LatLngLiteral: in property lat: not a number; and unknown property lat

错误原因 #

• 经纬度状态初始值不符合类型要求：lat、lng两个状态的初始值设为空字符串""，而接口请求是异步的，接口返回数据前组件就会完成首次渲染，此时构造的目的地坐标对象里的经纬度都是字符串类型，不满足Google Maps API要求经纬度为数字类型的规则。
• 路线计算触发时机错误：现有逻辑只监听用户当前定位point的变化，只要拿到定位就立刻发起路线计算，完全没有等待目的地经纬度的接口请求返回；就算后续接口返回了正确的经纬度，因为依赖项没加lat、lng，也不会重新触发路线计算。
• 缺少前置校验：调用路线规划接口前没有检查起点、终点坐标是否有效，只要任意一个值缺失、类型不对，就会直接触发API报错。

修复方案 #

• 调整状态初始值，把lat、lng的初始值从空字符串改为null，明确标记初始未加载的状态：

const [lat, setLat] = useState(null);
const [lng, setLng] = useState(null);

• 调整路线计算逻辑的useEffect依赖列表，把map、point、lat、lng全部加入依赖，保证任意一个相关数据更新时，都能重新校验状态、执行计算。
• 调用路线接口前增加前置判断，只有地图实例、用户定位、目的地经纬度全部就绪、类型合法时，才发起路线请求，同时加一层数字类型转换兜底，避免接口返回字符串格式的数字触发报错。
• 去掉渲染层单独定义的dest变量，在发起请求时再构造目的地参数，避免闭包拿到旧的状态值。

修复后的核心路线计算逻辑如下：

useEffect(() => {
  // 任意依赖数据未就绪，直接终止逻辑
  if (!map || !point || lat === null || lng === null) return;

  // 地图标记点逻辑
  const m = addMarker();
  clearMarkers(prevMarkersRef.current);
  prevMarkersRef.current.push(m);
  map.setCenter(point);

  // 初始化路线服务实例
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);

  // 构造符合类型要求的请求参数
  const routeRequest = {
    origin: point,
    destination: {
      lat: Number(lat),
      lng: Number(lng)
    },
    travelMode: "DRIVING"
  };

  directionsService.route(routeRequest, (result, status) => {
    if (status === "OK") {
      directionsRenderer.setDirections(result);
    }
  });
}, [map, point, lat, lng]);

调整后既可以解决类型不合法的报错，也能保证定位、目的地坐标任意一个更新时自动重新规划路线。

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