react-map-gl Map组件未传递access_token问题求助

算力阿峰

2026-7-31

解决Next.js中react-map-gl 7.0地图不显示（access_token为no-token）的问题

首先明确：react-map-gl 7.0目前处于活跃维护状态，并未停用，你的问题大概率出在配置或参数传递环节，以下是针对性排查解决步骤：

1. 规范Next.js环境变量配置

Next.js仅会将前缀为NEXT_PUBLIC_的环境变量暴露给客户端代码，按以下要求检查：

.env.local文件必须放在项目根目录（与package.json同级）

文件内变量定义格式正确：

NEXT_PUBLIC_MY_MAPBOX_API_TOKEN=你的Mapbox令牌内容

修改环境变量后重启Next.js开发服务器（环境变量不支持热加载）

2. 确保Map组件正确接收accessToken参数

react-map-gl 7.0的Map组件必须显式传入accessToken属性，不能依赖默认值。如果是Next.js 13+的App Router，组件还需添加客户端渲染指令，示例代码如下：

'use client'; // App Router下必须添加，确保组件在浏览器端渲染
import { Map } from 'react-map-gl';

export default function MapView() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Map
        initialViewState={{
          longitude: -122.4194,
          latitude: 37.7749,
          zoom: 12
        }}
        mapStyle="mapbox://styles/mapbox/streets-v12"
        accessToken={process.env.NEXT_PUBLIC_MY_MAPBOX_API_TOKEN} // 变量名需与.env.local中的完全一致
      />
    </div>
  );
}