無法在下一個 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();