使用Next.js调用Firestore接口返回404，URL是否有误？

核心问题分析 #

• 你混淆了Firebase的两个数据库：https://PROJECTID.firebaseio.com/是Realtime Database的REST接口地址，并非你正在使用的Firestore的地址。直接请求该地址会返回404页面（HTML格式），因此解析JSON时会触发格式错误。
• 你已经配置好Firebase SDK并导出了db实例，但代码中并未使用它，反而通过fetch请求错误的URL，这是无效操作。

解决方案 #

方案1：使用Firebase SDK在客户端获取Firestore数据 #

直接利用已配置的db实例查询数据，替换原有的fetch逻辑：

import { useState, useEffect } from 'react';
import db from '../path/to/firebase.js'; // 替换为你的firebase.js实际路径

function YourComponent() {
  const [showProducts, setShowProducts] = useState([]);

  useEffect(() => {
    async function pullProducts() {
      try {
        // 替换为你的Firestore集合名称，比如"products"
        const querySnapshot = await db.collection("products").get();
        const products = querySnapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data() // 展开文档中的数据字段
        }));
        // 生成渲染元素
        const displayProducts = products.map(product => (
          <p key={product.id}>{product.title}</p>
        ));
        setShowProducts(displayProducts);
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    }

    pullProducts();
  }, []);

  return <div>{showProducts}</div>;
}

export default YourComponent;

方案2：使用Next.js服务端方法获取（推荐，更安全） #

如果数据无需客户端动态更新，或需要严格权限控制，推荐用getServerSideProps在服务端获取数据后传给组件：

import db from '../path/to/firebase.js';

function YourComponent({ products }) {
  const displayProducts = products.map(product => (
    <p key={product.id}>{product.title}</p>
  ));

  return <div>{displayProducts}</div>;
}

export async function getServerSideProps() {
  try {
    const querySnapshot = await db.collection("products").get();
    const products = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    return {
      props: { products } // 将数据作为props传给组件
    };
  } catch (error) {
    console.error("服务端获取数据失败:", error);
    return {
      props: { products: [] } // 出错时返回空数组避免渲染异常
    };
  }
}

export default YourComponent;

关键注意事项 #

• 检查Firestore安全规则：默认规则仅允许认证用户访问数据，若组件未做用户认证，会被拒绝访问。测试阶段可临时修改规则：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true; // 仅测试用，上线务必改回安全规则
      }
    }
  }
  

  上线前必须设置符合业务需求的安全规则，比如限制仅认证用户读写、或按特定条件访问。
• 确认集合存在：确保Firestore控制台中存在你要查询的集合（如products），且集合内有数据。
• 区分Realtime Database和Firestore：二者是独立数据库，数据不互通，切勿混淆接口地址与使用方式。

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