Next.js集成Firestore报错：未创建默认Firebase应用

你遇到的核心问题是混淆了Firebase服务端SDK（firebase-admin）和客户端SDK（firebase/firestore）的使用场景与API，具体说明和解决方法如下：

1. 本质区别 #

• firebase-admin是专门给服务端（比如Next.js的API路由、Server Components）用的SDK，它通过服务端密钥认证，拥有最高权限，API风格是admin.firestore().collection(...)这类。
• firebase/firestore是给前端浏览器/客户端用的SDK，需要基于Web应用配置初始化客户端App，API风格是addDoc(collection(db, ...))这类，两者的初始化和API完全不通用。

你现在的错误是：在服务端API里调用了客户端SDK的addDoc方法，但只初始化了服务端的admin，客户端SDK并没有被初始化，所以会提示找不到[DEFAULT] App。

2. 服务端API操作Firestore的正确方式 #

如果是在Next.js的API路由里操作数据，直接用firebase-admin的API即可，不需要调用客户端的addDoc：

步骤1：确保服务端初始化文件正确 #

initFirebase.ts（建议用.ts而非.tsx，因为是服务端逻辑）：

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'),
    }),
  });
}

// 导出服务端的Firestore实例
export const serverDb = admin.firestore();

步骤2：在API路由中使用 #

比如pages/api/addData.ts：

import { serverDb } from '../../initFirebase';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  try {
    // 用admin的API添加文档，而非客户端的addDoc
    const docRef = await serverDb.collection('your-collection').add(req.body);
    res.status(200).json({ docId: docRef.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

3. 前端组件操作Firestore的正确方式 #

如果需要在前端组件（比如Client Components）里用addDoc这类方法，必须单独初始化客户端SDK，且不能在前端使用firebase-admin（会泄露服务端密钥）：

步骤1：创建客户端初始化文件 #

firebaseClient.ts：

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

// 从Firebase控制台获取的Web应用配置
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,
};

// 初始化客户端App
const app = initializeApp(firebaseConfig);
// 导出客户端的Firestore实例
export const clientDb = getFirestore(app);

步骤2：在前端组件中使用 #

'use client'; // 标记为Client Component

import { addDoc, collection } from 'firebase/firestore';
import { clientDb } from '../firebaseClient';

export default function AddDataButton() {
  const handleAdd = async () => {
    try {
      const docRef = await addDoc(collection(clientDb, 'your-collection'), {
        name: '测试数据',
        createdAt: new Date(),
      });
      console.log('文档ID:', docRef.id);
    } catch (error) {
      console.error('添加失败:', error);
    }
  };

  return <button onClick={handleAdd}>添加数据</button>;
}

总结 #

• 不需要同时在同一个环境初始化firebase-admin和客户端SDK，它们各司其职：服务端用admin，前端用客户端SDK。
• 报错的直接原因是你在服务端调用了需要客户端App的API，换成admin对应的API即可解决。

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