使用react-map-gl时useMap()始终返回{current: undefined}求解决方案

问题诊断 #

你的代码存在两个核心问题导致useMap()无法获取到地图实例：

1. useMap 的解构方式错误 #

react-map-gl的useMap()返回的是一个React Ref对象，结构为{ current: MapInstance | undefined }，并非带有default属性的对象。你写的const { default: map } = useMap()是错误的解构逻辑，直接导致map变量始终为undefined。

2. 地图实例的异步初始化特性 #

即使解构正确，useMap()返回的current在组件首次渲染时也可能是undefined——因为MapGL组件初始化地图实例是异步过程，需要等待地图加载完成后才会赋值。

修复步骤 #

步骤1：修正useMap的使用方式 #

直接获取Ref对象并访问其current属性，替换错误的解构逻辑：

import { useMap } from "react-map-gl";

// 正确写法：获取ref对象，通过current访问地图实例
const mapRef = useMap();
console.log(mapRef.current); // 地图初始化完成后会输出有效实例

步骤2：等待地图实例就绪后再操作 #

如果需要立即调用地图方法，可通过两种方式确保实例已初始化：

方式一：通过MapGL的onLoad事件传递实例

在InternalMap.tsx中添加onLoad回调，在地图加载完成时获取实例，可存入全局状态或Context供子组件使用：

// InternalMap.tsx
import MapGL from "react-map-gl";

const InternalMap = () => {
  const handleMapLoad = (mapInstance) => {
    // 此处可将mapInstance传递给需要的组件
    console.log("地图初始化完成", mapInstance);
  };

  return (
    <MapGL
      // 你的地图配置参数
      onLoad={handleMapLoad}
    >
      {/* 地图控件内容 */}
    </MapGL>
  );
};

方式二：用useEffect监听mapRef变化

在子页面中，通过useEffect监听mapRef.current的变化，确保实例就绪后再执行操作：

import { useMap, useEffect } from "react-map-gl";

const ChildPage = () => {
  const mapRef = useMap();

  useEffect(() => {
    if (mapRef.current) {
      // 地图实例已就绪，可调用相关方法
      console.log("可用地图实例", mapRef.current);
      // 示例：mapRef.current.flyTo({ center: [116.40, 39.90] })
    }
  }, [mapRef]);

  return <div>子页面内容</div>;
};

步骤3：确认MapProvider的作用范围 #

你的layout.tsx中用MapProvider包裹children和InternalMap的逻辑是正确的，需确保所有调用useMap()的子组件都处于该Provider的包裹范围内，Provider外部无法使用该Hook。

额外注意事项 #

• 确保使用的react-map-gl版本为v7及以上，useMap是v7版本新增的Hook，旧版本需通过ref直接获取MapGL实例或使用useMapControl。
• 禁止在组件渲染阶段直接调用地图实例方法，必须等待实例初始化完成后再操作（如在useEffect或onLoad回调中执行）。

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