如何为React-Leaflet的mapRef.current添加正确类型标注？

要修复unsafe call of an any typed value警告，只需为mapRef添加正确的Leaflet地图实例类型标注，步骤如下：

• 从leaflet库导入原生地图实例的类型Map
• 为useRef指定泛型类型Map | null，明确ref的取值范围

修改后的完整代码：

import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
// 导入Leaflet原生地图类型
import { Map } from 'leaflet';
import { LocationType } from '../../mocks';
import { useEffect, useRef } from 'react';

type MapProps = {
  location: LocationType;
}

export const Map = ({ location }: MapProps) => {
  const { coords, address } = location;
  // 为useRef添加泛型类型标注
  const mapRef = useRef<Map | null>(null);

  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.setView(coords, 13);
    }
  }, [coords]);

  return (
    <div className="map">
      <MapContainer ref={mapRef} className="map__container" center={coords} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={coords}>
          <Popup>
            {address}
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
};

额外说明：

• MapContainer的ref指向的是Leaflet的原生Map实例，所以必须用leaflet库提供的Map类型而非react-leaflet的类型
• 确保LocationType中的coords是Leaflet支持的坐标格式（比如[number, number]或{ lat: number; lng: number }），否则可能出现新的类型不匹配警告

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