Next.js中getServerSideProps无法获取Firebase Auth UID问题求助

js-cookie 是浏览器端库，仅能在客户端环境读取 cookie；而 getServerSideProps 运行在服务器端，没有浏览器的 cookie 上下文，所以直接调用 Cookies.get('uid') 无法拿到值。

1. 安装 cookie 解析库 #

服务器端需要手动解析请求头里的 cookie，安装 cookie 包：

npm install cookie
# 或
yarn add cookie

2. 修改 getServerSideProps 从请求头获取 uid #

利用 getServerSideProps 传入的 context 参数，从 req.headers.cookie 中解析出 uid：

import cookie from 'cookie';
import retrieveProjects from "../lib/retrieveProjects";

export async function getServerSideProps(context) {
  // 解析请求头中的 cookie
  const cookies = cookie.parse(context.req.headers.cookie || '');
  const uid = cookies.uid;

  // 如果没有 uid，重定向到登录页（可根据业务逻辑调整）
  if (!uid) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // 获取项目数据（retrieveProjects 返回 Promise，直接 await 即可）
  const ProjList = await retrieveProjects(uid);

  return { props: { ProjList } };
}

3. 优化 retrieveProjects 函数 #

原函数使用 onSnapshot 实时监听数据变化，但服务器端渲染只需要一次性获取数据，改用 getDocs 更合适，同时优化异步逻辑：

import { db } from "../config/firebase";
import { collection, getDocs } from "firebase/firestore";

export default async function retrieveProjects(userId) {
  try {
    const data = [];
    // 获取用户的所有项目
    const projectsSnapshot = await getDocs(collection(db, "users", userId, "projects"));

    // 遍历每个项目，获取公寓数据
    await Promise.all(projectsSnapshot.docs.map(async (projectDoc) => {
      const apartmentsSnapshot = await getDocs(collection(projectDoc.ref, "apartments"));

      // 遍历每个公寓，获取门数据
      await Promise.all(apartmentsSnapshot.docs.map(async (apartmentDoc) => {
        const doorsSnapshot = await getDocs(collection(apartmentDoc.ref, "Doors"));
        
        // 整理门数据并添加到结果数组
        const doorsData = doorsSnapshot.docs.map(doorDoc => ({
          projectId: projectDoc.id,
          apartmentId: apartmentDoc.id,
          doorId: doorDoc.id,
          width: doorDoc.data().porte_width,
          height: doorDoc.data().porte_height,
          thickness: doorDoc.data().porte_thickness,
        }));
        data.push(...doorsData);
      }));
    }));

    console.log("Data retrieved successfully:", data);
    return data;
  } catch (error) {
    console.error("Error retrieving data:", error);
    throw error;
  }
}

额外注意点 #

• 设置 uid 到 cookie 时，确保 cookie 的 path 设为 /，这样所有请求都会携带该 cookie；
• 若使用 Firebase Auth 的 ID Token，建议优先验证 Token 并从中提取 uid，而非直接存储 uid 到 cookie，避免 uid 被篡改。

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