Next.js+Firebase部署Vercel后无法连接Cloud Firestore求助

问题重现 #

本地环境可正常读写Cloud Firestore，但部署至Vercel后无法连接数据库，报错：

Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project.

已设置Firestore全开放规则：

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Vercel环境变量配置正确，使用Firebase v10.6，原experimentalForceLongPolling参数语法失效。

排查与解决步骤 #

1. 确认环境变量配置与Firebase初始化逻辑 #

• 若为客户端初始化（用于Client Components），变量需以NEXT_PUBLIC_开头，确保Vercel生产环境已配置并注入：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  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
  };
  
  const app = initializeApp(firebaseConfig);
  export const db = getFirestore(app);
  

• 若为服务端操作（API路由、Server Components），使用Firebase Admin SDK，变量无需NEXT_PUBLIC_前缀，注意私钥格式处理：

  import admin from "firebase-admin";
  
  if (!admin.apps.length) {
    admin.initializeApp({
      credential: admin.credential.cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
        privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n')
      })
    });
  }
  
  export const db = admin.firestore();
  

2. 配置Firebase v10+的长轮询替代方案 #

Firebase v10后experimentalForceLongPolling参数废弃，改用useFetchStreams与longPolling配置解决网络连接问题：

import { initializeApp } from "firebase/app";
import { initializeFirestore, Settings } from "firebase/firestore";

const firebaseConfig = { /* 你的配置 */ };
const app = initializeApp(firebaseConfig);

const firestoreSettings: Settings = {
  useFetchStreams: false, // 禁用流式请求，切换为长轮询
  longPolling: {
    enable: true
  }
};

export const db = initializeFirestore(app, firestoreSettings);

3. 确认Firestore规则已发布 #

• 登录Firebase控制台，进入Firestore规则页面，确认修改后的规则已点击发布按钮（仅保存不会生效）
• 使用规则模拟器，选择匿名用户测试读写操作，验证规则是否允许访问

4. 检查Vercel部署日志 #

• 查看Vercel部署过程中的构建日志，确认环境变量是否正确注入，无Firebase初始化失败的警告
• 若使用Next.js App Router，确保客户端Firebase初始化代码位于标注'use client'的组件中，避免服务端与客户端初始化冲突

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