为何API密钥无法在Home导出函数中加载？

你在Home组件的参数里声明了MAPBOX_ACCESS_TOKEN，这会覆盖外部同名的环境变量，而且组件的参数是props对象，你并没有从父组件传入这个属性，所以内部的MAPBOX_ACCESS_TOKEN会是undefined。

直接移除组件参数里的MAPBOX_ACCESS_TOKEN，使用外部已经从process.env中解构出的变量即可：

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import { useEffect, useRef } from 'react'; // 补充缺失的useRef导入

const { MAPBOX_ACCESS_TOKEN } = process.env;
console.log(MAPBOX_ACCESS_TOKEN) // 正常输出

export default function Home() { // 移除组件参数
  const mapContainer = useRef(null); // 定义mapContainer的ref

  console.log(MAPBOX_ACCESS_TOKEN) // 现在可正常输出

  useEffect(() => {
    console.log(MAPBOX_ACCESS_TOKEN) // 这里也能正常输出
    // 初始化mapbox地图（示例代码）
    if (mapContainer.current && MAPBOX_ACCESS_TOKEN) {
      mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
      new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-74.5, 40],
        zoom: 9
      });
    }
  }, []); // 空依赖确保只执行一次初始化

  return (
    <div ref={mapContainer} className="map-container" />
  )
}

补充说明：

• 原代码中使用了mapContainer但未导入useRef，需要补上这个React Hook的导入。
• 在useEffect中初始化地图时，建议增加非空判断，避免环境变量未加载或DOM节点未挂载导致的错误。

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