NextJS/Firebase - 实施 firebase 分析抛出错误：缺少应用程序配置值

Question

我正在使用带有默认页面目录的 Next JS 13，并且我为我的项目使用数据库。 一切正常，直到我开始实施 firebase 分析。

首先它抛出 window 是不守卫的。 我通过检查 window 解决了它。之后它起作用了，所以我想在我的 index.js 页面中测试 logEvent() function。

它抛出FirebaseError：Installations：缺少 App 配置值：“projectId”（installations/missing-app-config-values）。

我尝试使用 proccess.env.NEXT_PUBLIC 但它没有用。

import { initializeApp} from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { getAnalytics } from 'firebase/analytics';


const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const storage = getStorage(app);
export const analytics = typeof window !== 'undefined' ? getAnalytics(app) : null;
export default app;

Index.js 示例

<Button
key={`${name}_${index}`}
href={url}
mouseEnter={() => selectedImg !== img && handleMouseEnter(img)}
customStyles={'py-5 bg-primary-blue/60'}
onClick={() => (analytics ? logEvent(analytics, name) : {})}
>  Test </Button>

有人有类似的问题并解决了吗？

Answer 1

如错误所述，您的配置 object 中缺少“appId”。您可以尝试在 Firebase 控制台中再次复制它，以确保您使用的是更新后的控制台。

Answer 2

已解决：我在使用 .env 文件时出现问题，但在 next.js 中，env 变量应该在 next.config 中，因此它将在构建期间加载。