React扩展运算符传递GeolocationCoordinates对象失效问题排查

核心原因 #

GeolocationCoordinates是浏览器提供的宿主对象，不是标准的JavaScript普通对象。它的latitude、longitude等属性是通过内部getter实现的，并且默认不可枚举——而React的扩展运算符（...）只能遍历对象的可枚举自有属性，所以直接展开会得到空对象。

可行解决方案 #

1. 手动提取所需属性（最直接）

既然你已经试过这种方法可行，可以简化写法：

// 父组件
const { latitude, longitude } = geoCoords;
<Map latitude={latitude} longitude={longitude} />

2. 转换为普通JS对象

如果需要传递全部属性，用Object.assign或者手动解构把宿主对象转成普通对象：

// 方法A: Object.assign
const coordsObj = Object.assign({}, geoCoords);
<Map {...coordsObj} />

// 方法B: 手动解构所有属性（TS会自动提示）
const coordsObj = {
  latitude: geoCoords.latitude,
  longitude: geoCoords.longitude,
  accuracy: geoCoords.accuracy,
  altitude: geoCoords.altitude,
  // 其他需要的属性
};
<Map {...coordsObj} />

3. 封装转换工具函数（适合复用）

如果多处用到，可以写个工具函数统一转换：

function convertGeoCoordsToObj(coords: GeolocationCoordinates): Record<string, any> {
  return {
    latitude: coords.latitude,
    longitude: coords.longitude,
    accuracy: coords.accuracy,
    altitude: coords.altitude,
    altitudeAccuracy: coords.altitudeAccuracy,
    heading: coords.heading,
    speed: coords.speed,
  };
}

// 父组件中使用
<Map {...convertGeoCoordsToObj(geoCoords)} />

为什么Babel配置没用？ #

你配置的@babel/plugin-transform-spread是用来处理普通JS对象/数组的展开编译问题，但它无法改变宿主对象的属性枚举特性——这是浏览器API的设计问题，和编译无关，所以即便开启loose模式也解决不了。

验证方法 #

你可以在控制台执行Object.keys(geoCoords)，会发现返回的是空数组，这就证实了它的属性不可枚举，所以扩展运算符拿不到。

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