配置.env存储Google Maps API Key后地图加载异常问题排查

我已将Google Maps API Key添加到.env文件，配置了Webpack并在地图组件中调用该Key，控制台能正常打印出Key，但加载地图时仅显示一秒就弹出警告界面。

相关配置代码 #

Webpack配置文件 #

plugins: [
    new Dotenv({ systemvars: true }),
],

地图组件代码 #

const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_API_KEY,  
    libraries: [GOOGLE_MAP_PLACES_LIBRARY],
});

.env文件内容 #

REACT_APP_API_KEY : "someKey"

错误现象 #

地图加载后仅显示一秒，随即弹出警告界面（提示API密钥无效或未正确配置，可能原因包括密钥未启用Maps JavaScript API、未设置正确的应用限制等）

排查与解决方案 #

• 修正.env文件格式
  .env中键值对需用等号分隔，且无需给密钥加引号，正确格式应为：

  REACT_APP_API_KEY=someKey
  

  保存后重启开发服务器，确保环境变量重新加载。

• 验证API密钥配置
  登录Google Cloud控制台，确认该密钥已启用Maps JavaScript API和Places Library；检查密钥的应用限制：若设置了HTTP referrers限制，需将本地开发地址（如http://localhost:3000）或生产域名加入允许列表；若为IP限制，确保当前机器IP在允许范围内。

• 检查Webpack配置合理性
  若使用Create React App，无需手动配置Dotenv插件，框架会自动加载.env文件；手动配置Webpack时，确保Dotenv插件路径指向项目根目录的.env，且systemvars设置不会覆盖本地环境变量。

• 确认组件中密钥传递正确性
  在组件中打印process.env.REACT_APP_API_KEY，确保输出的是完整无多余空格的密钥，避免格式问题导致密钥无效。

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