FirebaseError：firebase.initializeApp (NextJS) 中未提供“projectId”

Question

我正在使用 NextJS、NextAuth 和 Firebase/Firestore 構建一個 web 應用程序，但出現錯誤：

錯誤 - [FirebaseError: firebase.initializeApp 中未提供“projectId”。] { code: 'invalid-argument', customData: undefined, toString: [Function (anonymous)]

這是我的 JS 文件：

import NextAuth from "next-auth/next";
import TwitterProvider from "next-auth/providers/twitter";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";

import { initializeApp, getApp, getApps } from "firebase/app";
import "firebase/auth";
import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
// import { getAnalytics } from "firebase/analytics";
// import { getStorage } from "firebase/storage";

import nextConfig from "next.config";

const firebaseConfig = {
  apiKey: nextConfig.env.FIREBASE_API_KEY,
  authDomain: nextConfig.env.FIREBASE_AUTH_DOMAIN,
  projectId: nextConfig.env.FIREBASE_PROJECT_ID,
  storageBucket: nextConfig.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: nextConfig.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: nextConfig.env.FIREBASE_APP_ID,
  measurementId: nextConfig.env.FIREBASE_MEASUREMENT_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
//const analytics = getAnalytics(app);
const db = getFirestore(app);
//const storage = getStorage(app);

const dbInstance = collection(db, "bugs");

const getBugs = () => {
  getDocs(dbInstance).then((data) => {
    console.log(data);
  });
};

export default NextAuth({
  providers: [
    TwitterProvider({
      clientId: nextConfig.env.TWITTER_CLIENT_ID,
      clientSecret: nextConfig.env.TWITTER_CLIENT_SECRET,
      version: "2.0", // opt-in to Twitter OAuth 2.0
    }),
  ],
  adapter: FirestoreAdapter(db),
});

我在 inte.net 上找不到任何解決方案。

任何的想法？

Answer 1

在 Nextjs 中，環境變量默認僅在 Node.js 環境中可用，這意味着它們不會暴露給瀏覽器。

為了向瀏覽器公開變量，您必須在變量前加上NEXT_PUBLIC_前綴

如下所示更改您的 firebase 配置，並更改.env文件中的 firebase env 變量以使用NEXT_PUBLIC_前綴。

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,
};