使用 Firebase Auth 部署站点失败，提示“初始化前无法访问‘auth’”

Question

我正在使用 Next.JS 和 Firebase 构建一个锻炼网站，一切都在我的本地主机上运行完美。当我使用 firebase 托管部署它时，每次构建都会失败，并显示“预渲染页面发生错误”。ReferenceError：无法在初始化前访问“auth””我不确定这是否是我的 firebase 设置问题或不是。这是我的 firebase 文件：

import { initializeApp } from "firebase/app";
import {
    signInWithPopup,
    GoogleAuthProvider,
    FacebookAuthProvider,
    signInWithEmailAndPassword,
    getAuth,
    signOut,
} from "firebase/auth";
import {
    getFirestore,
    getDocs,
    collection,
    deleteDoc,
    doc,
    setDoc,
} from "firebase/firestore";
import { toast } from "react-toastify";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const facebookProvider = new FacebookAuthProvider();

......
 a bunch of methods
......
export { auth };

然后在我的 _app.js 文件中，我使用钩子 useAuthState 让用户脱离身份验证并将其传递给应用程序的其余部分：

import React, { useState } from "react";
import { useLocalStorage } from "../components/useLocalStorage";
import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import Layout from "../components/Layout";
import ExerciseContextProvider from "../context/state";


function MyApp({ Component, pageProps }) {
    const [myWorkout, setMyWorkout] = useLocalStorage("exercise", []);
    const [user] = useAuthState(auth);
    const [loading, setLoading] = useState(false);

    return (
        <>
            <ExerciseContextProvider>
                <Layout user={user}>
                    <Component
                        {...pageProps}
                        user={user}
                        loading={loading}
                        setLoading={setLoading}
                        myWorkout={myWorkout}
                        setMyWorkout={setMyWorkout}
                    />
                </Layout>
            </ExerciseContextProvider>

        </>
    );
}

export default MyApp;

有人知道为什么我的构建会失败吗？

我尝试了很多从我的 firebase 文件中导入身份验证的不同方法，但它总是说在初始化之前无法访问，我认为这很奇怪，因为它在我的本地机器上再次完美运行。

Answer 1

我错误地假设，因为 Firebase 有我的 API 密钥并且也在托管它，所以我不必弄乱那些我错了的配置。进一步研究，firebase 希望您使用云功能，如果不放入信用卡就无法访问这些功能。我没有这样做，而是托管在 Netlify 中，并确保将适当的环境变量添加到其中，现在它将部署。