NextJS+TS集成react-leaflet-draw报错：useLeafletContext无上下文

问题重现 #

在NextJS+TS项目中使用react-leaflet-draw实现地图区域多边形绘制功能，添加DrawTools组件后出现以下错误：

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of

移除DrawTools组件后地图可正常渲染，已尝试动态导入DrawTools及将代码内嵌到Map组件，均未解决。

解决方案 #

1. 动态导入DrawTools组件并禁用SSR #

在Map.tsx中，将DrawTools的静态导入改为动态导入，确保组件仅在客户端渲染，同时补充导入leaflet-draw的样式文件：

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";
import dynamic from "next/dynamic";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css"; // 导入leaflet-draw样式文件

// 动态导入DrawTools，禁用SSR
const DrawTools = dynamic(() => import("./DrawTools"), {
  ssr: false,
});

const Map: React.FC = () => {
  const mapConfig = {
    lat: 0.67,
    lng: 114.0,
    zoom: 6,
  };

  return (
    <MapContainer
      center={[mapConfig.lat, mapConfig.lng]}
      zoom={mapConfig.zoom}
      style={{ height: "100vh" }}
    >
      <DrawTools />
      <TileLayer
        attribution="Tiles &copy; Carto"
        url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
      />
    </MapContainer>
  );
};

export default Map;

2. 启用多边形绘制功能 #

修改DrawTools.tsx中的draw配置，将polygon设为启用状态（支持自定义样式），以实现区域多边形创建：

// DrawTools.tsx中EditControl的draw配置
draw={{
  polyline: {
    icon: new DivIcon({
      iconSize: new Point(8, 8),
      className: "leaflet-div-icon leaflet-editing-icon",
    }),
    shapeOptions: {
      color: "navy",
      weight: 3,
    },
  },
  rectangle: false,
  circlemarker: false,
  circle: false,
  polygon: { // 启用多边形绘制
    shapeOptions: {
      color: "navy",
      weight: 3,
    },
  },
}}

3. 验证依赖版本兼容性 #

确保项目依赖版本匹配，当前使用的版本组合是兼容的：

• leaflet: ^1.9.3
• react-leaflet: ^4.2.1
• react-leaflet-draw: ^0.20.4

若后续出现异常，可检查是否存在版本冲突，优先使用官方推荐的版本搭配。

关键说明 #

• 错误根源：react-leaflet-draw的EditControl依赖MapContainer提供的上下文，服务端渲染时无法获取该上下文，因此必须确保DrawTools仅在客户端加载。
• 必须导入leaflet-draw/dist/leaflet.draw.css，否则绘制工具的样式会出现异常。

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