在Next.js组件中使用useGoogleMap()报错，寻求解决方案

这个错误的核心原因是：useGoogleMap()钩子依赖Google Map的上下文环境，你的组件必须处于<GoogleMap>组件的子树范围内，才能让钩子获取到地图实例。

具体解决步骤： #

1. 确保安装正确依赖包
   执行以下命令安装@react-google-maps/api（useGoogleMap通常来自这个库）：

   npm install @react-google-maps/api
   # 或
   yarn add @react-google-maps/api
   

2. 将使用useGoogleMap()的组件嵌套在<GoogleMap>内部
   先创建包含<GoogleMap>的父容器组件，再在其子组件中调用钩子：

   父容器组件（MapContainer.jsx）

   import { GoogleMap, LoadScript } from '@react-google-maps/api';
   import MapChild from './MapChild';
   
   const MapContainer = () => {
     const mapStyle = { width: '100%', height: '500px' };
     const defaultCenter = { lat: 39.9042, lng: 116.4074 }; // 示例坐标
   
     return (
       <LoadScript googleMapsApiKey="你的Google Maps API密钥">
         <GoogleMap
           mapContainerStyle={mapStyle}
           center={defaultCenter}
           zoom={12}
         >
           {/* 子组件必须放在GoogleMap标签内部 */}
           <MapChild />
         </GoogleMap>
       </LoadScript>
     );
   };
   
   export default MapContainer;
   

   子组件（MapChild.jsx）

   import { useGoogleMap } from '@react-google-maps/api';
   import { useEffect } from 'react';
   
   const MapChild = () => {
     const mapInstance = useGoogleMap();
   
     // 拿到实例后执行业务逻辑
     useEffect(() => {
       if (mapInstance) {
         console.log('获取到Google Map实例:', mapInstance);
         // 示例：添加地图点击事件监听
         const listener = mapInstance.addListener('click', (e) => {
           console.log('点击地图坐标:', e.latLng);
         });
   
         return () => listener.remove();
       }
     }, [mapInstance]);
   
     return null; // 或渲染地图相关UI元素
   };
   
   export default MapChild;
   

3. Next.js SSR适配
   由于Google Maps依赖浏览器环境，在Next.js的服务端渲染（SSR）模式下直接渲染会报错，需要禁用组件的SSR：

   import dynamic from 'next/dynamic';
   
   // 动态导入MapContainer并禁用SSR
   const MapContainer = dynamic(() => import('./MapContainer'), {
     ssr: false,
     loading: () => <div>地图加载中...</div>
   });
   
   export default function MapPage() {
     return (
       <div>
         <h2>我的地图页面</h2>
         <MapContainer />
       </div>
     );
   }
   

关键注意点： #

• 绝对不能在<GoogleMap>组件的外部调用useGoogleMap()，钩子必须能从上下文获取到地图实例
• 确保你的Google Maps API密钥已启用Maps JavaScript API权限，否则会出现加载失败的问题

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