使用Mapbox GL JS构建Web地图时出现"Cannot read property '0' of undefined"错误求助

首先，这个错误通常是Mapbox在解析GeoJSON数据源时找不到预期结构导致的——毕竟你明确说代码没改动、一天前还能正常运行，那问题大概率出在你的数据源http://localhost:3000/data上，而非Mapbox代码本身。下面是一步步排查和解决的思路：

1. 优先检查数据源返回内容 #

打开浏览器开发者工具（按F12），切换到「网络」标签页，刷新页面后找到http://localhost:3000/data的请求记录：

• 先看状态码：如果是404/500这类错误码，说明你的本地服务挂了或者接口路径悄悄变了，得先把服务恢复正常。
• 如果状态码是200，点击查看响应内容，确认返回的是标准有效的GeoJSON格式：
  • 必须包含type: "FeatureCollection"字段，且存在features数组（哪怕是空数组也得明确声明）。
  • 如果返回的是空字符串、非GeoJSON格式的JSON，或者features字段缺失，Mapbox解析时就会抛出这个"Cannot read property '0' of undefined"错误。

标准有效GeoJSON示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [100.0, 0.0]
      },
      "properties": {}
    }
  ]
}

2. 用测试数据源验证代码 #

如果不确定是不是数据源的问题，可以临时替换代码里的数据源，用一个本地写死的GeoJSON试试：

map.addSource('features', {
  type: 'geojson',
  data: {
    "type": "FeatureCollection",
    "features": [
      {"type": "Feature", "geometry": {"type": "Point", "coordinates": [-74.5, 40]}, "properties": {}}
    ]
  }
});

如果这样地图能正常加载，那就能100%确定是localhost:3000/data的返回内容出了问题，接下来专注修复这个接口即可。

3. 清理浏览器缓存试试 #

有时候浏览器会缓存旧的错误响应，你可以在开发者工具的「网络」标签页勾选「禁用缓存」，然后刷新页面重新请求数据源，看是否能拿到正确内容。

4. 确认依赖版本（可选） #

虽然你没改代码，但如果项目是自动更新依赖的（比如用npm/yarn），可能Mapbox GL JS的版本悄悄更新了，导致对GeoJSON的解析规则更严格。可以查看项目依赖版本，回退到之前正常的版本试试——不过这个概率比较低，优先排查数据源问题。

总结：因为代码无改动、之前正常运行，核心问题肯定出在数据源的返回内容或服务状态上，按上面的步骤排查，大概率能快速解决问题。

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