Next.js15/React19+Firestore应用身份验证失败：无效API密钥求助

问题根源 #

Next.js 中，不带NEXT_PUBLIC_前缀的环境变量仅在服务端代码中可用。你的Firebase身份验证属于客户端操作（浏览器中执行），此时客户端代码读取不到process.env.FIREBASE_API_KEY这类无前缀变量，直接导致API密钥无效；但你需要服务端渲染评论，所以服务端必须能访问这些配置。

解决方案 #

方案1：拆分配置，兼顾客户端与服务端需求 #

给客户端需要的Firebase配置添加NEXT_PUBLIC_前缀，保证客户端能读取，同时服务端也能正常访问这些变量（Next.js服务端可读取所有环境变量，包括带前缀的）。

1. 修改env.local文件：

# 客户端需用的Firebase配置添加前缀
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaxxxxxxxxxxxxxxxxxx_zsZ5_ZQ
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=portfolio-413710.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=portfolio-413710
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=portfolio-413710.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=234xxxxxxxxxx874
NEXT_PUBLIC_FIREBASE_APP_ID=1:2341492xxxxxxxxxxxxxxx6732512375b37b

# 服务端专属变量保留原名称
WEB_CLIENT_ID=234149251874-sm29dn17aj0fcn0dms20e2a29v1i7ov6.apps.googleusercontent.com
ADMIN_DATA=Misino Kiszuriwalilibori

2. 调整Firebase初始化代码：

import { getApps, initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, Auth } from "firebase/auth";

// 服务端和客户端均可读取带NEXT_PUBLIC_前缀的变量
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// 避免重复初始化Firebase实例
let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export let auth: Auth = getAuth(firebase_app);
export default firebase_app;
export const db = getFirestore(firebase_app);

3. 关键说明：
   • 带前缀的变量会被注入到客户端代码中，解决本地认证时API密钥无效的问题；
   • 服务端依然能读取这些变量，SSR获取评论的逻辑不受任何影响。

方案2：服务端代理认证请求（更安全） #

如果不想暴露Firebase API密钥到客户端，可以在服务端创建API路由，代理所有客户端的认证请求，客户端仅与你的Next.js服务端通信。

1. 创建服务端API路由（示例：app/api/auth/login/route.js）：

import { auth as firebaseAuth } from "@/lib/firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { NextResponse } from "next/server";

export async function POST(request) {
  const { email, password } = await request.json();
  try {
    const userCredential = await signInWithEmailAndPassword(firebaseAuth, email, password);
    return NextResponse.json({ user: { uid: userCredential.user.uid, email: userCredential.user.email } });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 401 });
  }
}

2. 客户端调用该API：

// 客户端登录逻辑
async function handleLogin(email, password) {
  const res = await fetch("/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password })
  });
  const data = await res.json();
  // 处理登录结果
}

3. 关键说明：
   • 服务端用无前缀的环境变量初始化Firebase，保证SSR评论功能正常；
   • 客户端无需直接访问Firebase配置，避免API密钥暴露。

必做排查步骤 #

1. 重启开发服务器：修改env.local后必须重启Next.js，否则新环境变量不会生效；
2. 检查变量拼写：确保NEXT_PUBLIC_FIREBASE_*与env.local中的名称完全一致，无拼写错误；
3. 验证Firebase密钥权限：在Firebase控制台，检查API密钥的应用限制是否允许本地开发域名（如http://localhost:3000）；
4. 打印变量确认：在客户端代码中打印console.log(process.env.NEXT_PUBLIC_FIREBASE_API_KEY)，确认是否能拿到有效值，若为undefined则说明环境变量未正确注入。

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