NextJS集成@react-google-maps/api生产构建后加载失败求助

看起来你遇到的问题挺典型的——开发模式下Google Maps能正常加载，但生产构建后就报404，请求路径还变成了http://localhost:3000/undefined?，这大概率是环境变量在生产构建时没有被正确注入导致的，我来帮你一步步排查和解决：

1. 先确认生产环境的环境变量配置 #

首先得确保你的生产环境里确实有正确的API密钥配置：

• 检查项目根目录下的.env.production文件，里面必须要有NEXT_PUBLIC_GOOGLE_MAP_API这个变量，并且值是有效的Google Maps API密钥，注意不要有多余的空格或引号
• 如果你是在部署平台（比如Vercel、Netlify）上构建，一定要在平台的环境变量设置面板里添加NEXT_PUBLIC_GOOGLE_MAP_API，平台构建时只会读取自己配置的环境变量，不会读取本地的.env文件

2. 给代码加个兜底检查，避免undefined的情况 #

你的代码里直接用了process.env.NEXT_PUBLIC_GOOGLE_MAP_API as string断言成字符串，但如果这个变量在生产环境中不存在，就会变成undefined，而useJsApiLoader拿到undefined的密钥后，就会生成错误的请求地址。可以加个前置检查：

"use client";
import { Libraries, useJsApiLoader } from "@react-google-maps/api";
import { ReactNode } from "react";

const libraries = ["places", "drawing", "geometry"] as Libraries;

export default function MapProvider({ children }: { children: ReactNode }) {
  // 先取出API密钥并检查是否存在
  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAP_API;
  
  if (!apiKey) {
    console.error("⚠️ Google Maps API密钥未配置，请检查环境变量！");
    return <p>地图服务配置错误，请联系管理员</p>;
  }

  const { isLoaded: scriptLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: apiKey,
    libraries,
  });

  if (loadError) {
    console.log("GOOGLE MAPS LOAD ERROR", loadError);
    return <p>加载地图时遇到错误，请稍后重试</p>;
  }

  if (!scriptLoaded) return <p>地图加载中...</p>;

  return children;
}

3. 本地构建时手动注入环境变量测试 #

如果是本地测试生产构建，可以直接在命令行里注入环境变量，排除.env文件加载的问题：

NEXT_PUBLIC_GOOGLE_MAP_API=你的真实API密钥 npm run build && npm run start

4. 清理缓存后重新构建 #

有时候Next.js的构建缓存会残留旧的配置，导致环境变量没有更新，可以先清理缓存再构建：

rm -rf .next node_modules/.cache
npm run build && npm run start

总结一下，核心问题就是生产环境下googleMapsApiKey拿到了undefined，导致API请求路径错误，按照上面的步骤排查，应该能解决你的问题。

内容来源于stack exchange