Next.js使用getServerSideProps调用Firebase实时数据库报错求助

核心问题分析 #

你遇到的错误根源有两个：

1. Firebase服务类型混淆：你提到使用的是Firestore，但用了Firebase Realtime Database的URL格式（firebaseio.com），两者的API端点完全不同。
2. Realtime Database URL格式错误：如果确实是用Realtime Database，你漏了URL末尾的.json后缀，导致Firebase返回HTML错误页面而非JSON数据。

分场景解决方案 #

场景1：你实际要访问的是Firestore

Firestore的REST API域名是firestore.googleapis.com，而非firebaseio.com，正确调用方式如下：

export async function getServerSideProps(context) {
  const session = await getSession(context);
  const projectId = "你的Firebase项目ID"; // 替换成你的项目ID

  try {
    const res = await fetch(
      `https://firestore.googleapis.com/v1/projects/${projectId}/databases/(default)/documents/products`,
      {
        headers: {
          // 若需要权限验证，带上用户的ID Token
          ...(session?.user?.idToken && {
            Authorization: `Bearer ${session.user.idToken}`
          })
        }
      }
    );

    if (!res.ok) throw new Error(`请求失败：${res.statusText}`);
    const firestoreResponse = await res.json();
    
    // 转换Firestore返回的格式为你需要的结构
    const products = firestoreResponse.documents?.map(doc => ({
      id: doc.name.split("/").pop(),
      // 注意Firestore字段会带类型标识，比如stringValue，需要根据实际类型处理
      ...Object.fromEntries(
        Object.entries(doc.fields).map(([key, value]) => [key, Object.values(value)[0]])
      )
    })) || [];

    return {
      props: { products, session },
    };
  } catch (err) {
    console.error(err);
    // 处理错误，比如返回空数据或重定向
    return { props: { products: [], session } };
  }
}

场景2：你实际要访问的是Firebase Realtime Database

Realtime Database的REST API要求URL末尾必须添加.json后缀，修正代码如下：

export async function getServerSideProps(context) {
  const session = await getSession(context);

  try {
    const res = await fetch("https://database-73695.firebaseio.com/.json"); // 加上.json后缀
    if (!res.ok) throw new Error(`请求失败：${res.statusText}`);
    const products = await res.json();

    return {
      props: { products, session },
    };
  } catch (err) {
    console.error(err);
    return { props: { products: {}, session } };
  }
}

补充说明 #

• 你之前用res.text报错是因为写成了res.text，正确的方法调用是res.text()（需加括号），不过这不是核心问题。
• 既然你的users集合能正常工作，建议对齐它的实现方式：如果是用Firebase JS SDK（如db.collection('users').get()），那products也应该用同款SDK，比直接调用REST API更简洁且不易出错。

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