NextJS 13+ Server Components能否结合Firebase获取Firestore数据？

• 核心结论：完全可行，不需要依赖"use client"组件。
• 实现逻辑：Server Components 运行在服务端 Node.js 环境中，可直接使用 Firebase Admin SDK 操作 Firestore，无需客户端 Firebase SDK 或 React Hooks。
• 代码示例：
  1. 初始化 Firebase Admin SDK（建议封装在单独文件中，如lib/firebase-admin.js）：

  import { initializeApp, getApps, cert } from 'firebase-admin/app';
  import { getFirestore } from 'firebase-admin/firestore';
  
  // 从环境变量读取服务账号密钥
  const serviceAccount = JSON.parse(process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT);
  
  // 单例模式初始化，避免重复创建实例
  if (!getApps().length) {
    initializeApp({
      credential: cert(serviceAccount)
    });
  }
  
  export const db = getFirestore();
  

  2. 在 Server Component 中直接调用获取数据：

  import { db } from '@/lib/firebase-admin';
  
  export default async function PostsList() {
    const postsSnapshot = await db.collection('posts').limit(10).get();
    const posts = postsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  
    return (
      <div>
        <h2>最新文章</h2>
        {posts.map(post => (
          <div key={post.id}>{post.title}</div>
        ))}
      </div>
    );
  }
  

• 关键注意事项：
  • 服务账号密钥需通过环境变量安全配置，绝对不能暴露到客户端代码中
  • 必须使用单例模式初始化 Admin SDK，避免服务端重复创建实例导致资源浪费
  • Server Component 支持直接通过async/await处理异步数据请求，无需额外状态管理或客户端渲染逻辑

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