React Leaflet + TypeScript中GeoJSON类型错误求助

问题原因 #

TypeScript会把你加载的GeoJSON数据里的type字段推断为宽泛的string类型，但React Leaflet的GeoJSON组件要求data属性必须符合GeoJsonObject类型（来自@types/geojson），该类型对type字段有严格的字面量限制（比如"FeatureCollection"、"Feature"等），所以出现类型不兼容报错。

解决方案 #

1. 快速修复：类型断言

直接将dataGeo断言为符合要求的GeoJSON类型，这是最快的临时解决方式：

<GeoJSON 
  data={dataGeo as GeoJsonObject} 
  onEachFeature={featureClick} 
  style={(feature) => getFeatureStyle(feature.properties.name)} 
/>

如果确定你的数据是FeatureCollection，可以断言得更精确：

import { FeatureCollection } from 'geojson';

<GeoJSON 
  data={dataGeo as FeatureCollection} 
  onEachFeature={featureClick} 
  style={(feature) => getFeatureStyle(feature.properties.name)} 
/>

2. 更严谨的方式：定义精确类型

为你的GeoJSON数据定义专属类型，让TypeScript能正确推断类型，避免断言：

import { FeatureCollection, Feature, Polygon } from 'geojson';

// 定义你的Feature属性类型，根据实际数据补充字段
interface CountryProperties {
  featurecla: string;
  scalerank: number;
  labelrank: number;
  sovereignt: string;
  sov_a3: string;
  // 其他160+属性按需添加...
}

// 组合成你的Feature和FeatureCollection类型
type CountryFeature = Feature<Polygon, CountryProperties>;
type CountryFeatureCollection = FeatureCollection<CountryFeature>;

// 给dataGeo指定类型
const dataGeo: CountryFeatureCollection = /* 你的GeoJSON数据 */;

之后再使用<GeoJSON>组件时就不会有类型错误了。

3. 动态加载场景：使用类型守卫

如果你的GeoJSON是通过API动态获取的，可以用类型守卫来验证并缩小类型：

import { FeatureCollection, GeoJsonObject } from 'geojson';

function isFeatureCollection(obj: unknown): obj is FeatureCollection {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'type' in obj &&
    (obj as { type: string }).type === 'FeatureCollection' &&
    'features' in obj &&
    Array.isArray((obj as { features: unknown[] }).features)
  );
}

// 假设你从API获取数据
async function fetchGeoData() {
  const res = await fetch('/your-geojson-url');
  const data = await res.json();
  if (isFeatureCollection(data)) {
    // 这里data会被推断为FeatureCollection类型
    setDataGeo(data);
  } else {
    // 处理数据不符合预期的情况
    console.error('Invalid GeoJSON data');
  }
}

补充说明 #

确保你已经安装了@types/geojson依赖（React Leaflet通常会间接依赖，但如果没有的话可以手动安装：npm install @types/geojson --save-dev）。

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