无法在下一个 js 应用程序中从 Google 的实时数据库中提取数据库

Question

目前我无法从谷歌实时数据库中提取数据库，我不确定我做错了什么。 以下是我的类别页面中的代码。

import CategoryHeader from '../../components/CategoryHeader';
import database from '../../DataManagement/data/data.json';
import Product from './product';

import { app } from '../../firebase/firebase';

export default function Categories({ data }) {
    // console.log(data)

    const productData = database

    return ( 
        <section>
            <CategoryHeader header="All Products"/>
            <div className="catergory">
                <ul>
            {
                productData.map((data) => {
                    return <li key={data.id}><Product 
                         
                        productName={data.name} 
                        productDescription={data.description} 
                        productImage={data.image.desktop}/>
                        </li>
                })
            }
            </ul>
        </div>
        </section>
    )
}

export async function getStaticProps() {
    const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com');
    const data = res.json();

    return {
        props: {
            data,
        }
    }
}

我在下面的 firebase 配置中具有来自 Firebase 的基本设置。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyDrrHKenRbeiyfUO58v88TSJEdtWumWZjk",
  authDomain: "audiophile-a8abd.firebaseapp.com",
  databaseURL: "https://audiophile-a8abd-default-rtdb.firebaseio.com",
  projectId: "audiophile-a8abd",
  storageBucket: "audiophile-a8abd.appspot.com",
  messagingSenderId: "193961133135",
  appId: "1:193961133135:web:9c9e8731fc281a68eb563a",
  measurementId: "G-V2C17TC2ZN"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);

我继续得到的错误是“SerializableError：错误序列化从“/categories”中的getStaticProps返回的.data 。

任何想法如何获取实时数据？

Answer 1

这不起作用：

const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com');
const data = res.json();

如果您在浏览器中打开 URL，您必须登录，然后进入项目的 Firebase 控制台。 并且fetch没有能力处理这个问题，也不是你真正想要的。

If you want to get the JSON from your database, you're looking to use the Firebase REST API and you need to ensure the path of the URL ends with .json . 所以：

const res = await fetch('https://audiophile-a8abd-default-rtdb.firebaseio.com/.json');
const data = res.json();