为什么react-map-gl的Source组件为何不接受传入的object类型GeoJSON数据？

问题原因 #

这个报错是TypeScript类型校验不匹配导致的：

• react-map-gl的Source组件data属性确实支持object类型，但不是泛指的任意object，只能是符合GeoJSON规范的Feature或者FeatureCollection类型的object。
• 你当前的data变量被标注为宽泛的object类型，TypeScript无法确认这个object包含GeoJSON要求的type、features等必填属性，因此抛出类型错误。

解决方法 #

方法1：使用标准GeoJSON类型（推荐）

1. 首先安装GeoJSON类型定义包：

npm install @types/geojson --save-dev

2. 给data变量指定正确的GeoJSON类型，示例如下：

import type { FeatureCollection, Geometry } from 'geojson';

// 替换原来的object类型标注
const data: FeatureCollection<Geometry> = 你解析后的JSON数据;

如果是动态请求的GeoJSON数据，解析时添加类型断言即可：

const loadGeoJson = async () => {
  const res = await fetch('/path/to/your/file.geojson');
  // 确认数据结构符合GeoJSON规范的前提下添加类型断言
  const result = await res.json() as FeatureCollection<Geometry>;
  setData(result);
}

方法2：临时绕开类型校验（不推荐）

如果你只是需要快速测试，不想添加类型定义，可以直接对data做any类型断言，跳过TS校验：

<Source id="my-data" type="geojson" data={data as any}>
    <Layer {...layerStyles}/>
</Source>

注意：使用该方法会失去类型校验能力，你需要自行保证传入的data是合法的GeoJSON结构，否则运行时仍会报错。

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