Firebase/NextJS应用连接Realtime Database的正确操作流程

1. 安装依赖 #

先安装 Firebase 客户端 SDK 和服务端 Admin SDK：

npm install firebase firebase-admin
# 或使用 yarn
yarn add firebase firebase-admin

2. 配置 Firebase 实例 #

客户端配置（用于客户端组件） #

在项目中创建 lib/firebase/client.js 文件，填入 Firebase 控制台获取的项目配置：

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);

服务端配置（用于服务端组件/API 路由） #

创建 lib/firebase/server.js 文件，使用服务端 Admin SDK 初始化：

import admin from "firebase-admin";

// 避免重复初始化
if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: "YOUR_PROJECT_ID",
      clientEmail: "YOUR_CLIENT_EMAIL",
      // 从环境变量读取私钥，注意替换转义换行符
      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n')
    }),
    databaseURL: "YOUR_DATABASE_URL"
  });
}

export const adminDb = admin.database();

将私钥内容存入项目根目录的 .env.local 文件：

FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_CONTENT\n-----END PRIVATE KEY-----"

3. 客户端组件中使用 Realtime Database #

客户端组件必须添加 'use client' 指令，示例如下：

'use client';

import { db } from '@/lib/firebase/client';
import { ref, set, onValue } from "firebase/database";
import { useState, useEffect } from 'react';

export default function RealtimeDemo() {
  const [userData, setUserData] = useState(null);

  // 写入数据
  const writeTestData = () => {
    set(ref(db, 'users/1'), {
      name: 'John Doe',
      email: 'john@example.com'
    });
  };

  // 监听实时数据变化
  useEffect(() => {
    const userRef = ref(db, 'users/1');
    const unsubscribe = onValue(userRef, (snapshot) => {
      setUserData(snapshot.val());
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

  return (
    <div>
      <button onClick={writeTestData}>写入测试数据</button>
      {userData && (
        <div>
          用户名：{userData.name}<br/>
          邮箱：{userData.email}
        </div>
      )}
    </div>
  );
}

4. 服务端组件/API 路由中使用 Realtime Database #

服务端组件无需 'use client' 指令，直接使用 Admin SDK：

import { adminDb } from '@/lib/firebase/server';

export default async function ServerSideDemo() {
  const userRef = adminDb.ref('users/1');
  const snapshot = await userRef.once('value');
  const userData = snapshot.val();

  return (
    <div>
      <h3>服务端读取数据</h3>
      {userData && (
        <div>
          用户名：{userData.name}<br/>
          邮箱：{userData.email}
        </div>
      )}
    </div>
  );
}

API 路由示例（app/api/get-user/route.js）：

import { adminDb } from '@/lib/firebase/server';
import { NextResponse } from 'next/server';

export async function GET() {
  const userRef = adminDb.ref('users/1');
  const snapshot = await userRef.once('value');
  return NextResponse.json(snapshot.val());
}

5. 常见问题排查 #

• 确保 Realtime Database 已在 Firebase 控制台启用，数据库 URL 与配置一致。
• 开发阶段可临时设置宽松的数据库规则（生产环境必须修改为安全规则）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

• 服务端私钥环境变量需正确处理换行符，避免初始化失败。
• 客户端组件必须添加 'use client'，否则无法使用 React Hooks 和 Firebase 客户端 SDK。

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