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