Next.js 15集成react-leaflet开发模式报错问题咨询

问题根源 #

Next.js 15 默认在开发模式下严格启用 React 18 的严格模式（Strict Mode），该模式会对组件执行「挂载→卸载→重新挂载」的双重渲染流程，用于检测潜在的副作用问题。而 Next.js 14.2.16 虽也支持严格模式，但默认渲染行为未像 15 版本一样完全触发完整的卸载流程，因此规避了这个冲突。

React-Leaflet 的 MapContainer 会直接操作 DOM 创建 Leaflet 地图实例，若组件卸载时未主动销毁该实例，重新挂载时会发现同一个 DOM 容器已被初始化过，从而抛出错误。生产模式下严格模式自动关闭，因此不会出现该问题。

有效解决方案 #

你之前尝试用 useEffect 清理实例但未成功，大概率是未正确获取并销毁 Leaflet 地图实例。以下是正确的实现方式：

在 _components/map/index.tsx 中修改代码：

import { useEffect, useRef } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';

// 封装子组件用于获取真实Leaflet地图实例
function MapInstanceGrabber({ setMap }: { setMap: (map: L.Map) => void }) {
  const map = useMap();
  useEffect(() => {
    setMap(map);
  }, [map, setMap]);
  return null;
}

export default function Map() {
  const mapRef = useRef<L.Map | null>(null);

  // 组件卸载时销毁地图实例
  useEffect(() => {
    return () => {
      if (mapRef.current) {
        // 彻底移除地图实例、清除DOM绑定事件及资源
        mapRef.current.remove();
        mapRef.current = null;
      }
    };
  }, []);

  return (
    <MapContainer
      center={[51.505, -0.09]} // 替换为你的业务坐标
      zoom={13}
      style={{ height: '400px', width: '100%' }}
    >
      <MapInstanceGrabber setMap={(map) => (mapRef.current = map)} />
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {/* 其他自定义地图组件 */}
    </MapContainer>
  );
}

关键说明 #

1. 通过 useMap Hook 获取真实的 Leaflet 地图实例，而非直接给 MapContainer 加 ref（react-leaflet 的 MapContainer ref 指向组件实例而非 Leaflet 地图对象）。
2. 在 useEffect 的清理函数中调用 map.remove()，彻底销毁地图实例及关联资源，确保组件重新挂载时容器处于未初始化状态。

额外验证项 #

若上述方案仍无效，可检查：

• 是否在全局多处重复渲染了 Map 组件，导致同一 DOM 容器被复用。
• 确认 next.config.js 中未手动修改 Strict Mode 配置（Next.js 15 开发模式默认启用该模式）。

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