未登录的FirebaseError: Firebase:错误(auth/无效-api-key)

Question

配置：

vite v2.6.4

反应v17.0.0，

firebase v9.5.0

当我在netlify上部署我的应用程序时，一切都进行得很顺利。但是当我进入我的应用程序时，它完全是空白的，控制台会记录我的日志：

未登录FirebaseError: Firebase: Error (auth/无效-api-key)。

为了我的firebase项目，我将api键放在一个被git忽略的/.env文件中。我读过https://vitejs.dev/guide/env-and-mode.html页面，但不太明白该做什么。

.env文件

VITE_APP_API_KEY= *thekey*
VITE_APP_AUTH_DOMAIN= *theauthdomain*
VITE_APP_PROJECT_ID= *theprojectid
VITE_APP_STORAGE_BUCKET= *thebucket*
VITE_APP_MESSAGING_SENDER_ID= *themsId*
VITE_APP_APP_ID= *theappid*

.gitignore文件

node_modules
.DS_Store
dist
dist-ssr
*.local
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

Firebase.js文件

const firebaseConfig = {
    apiKey: import.meta.env.VITE_APP_API_KEY,
    authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_APP_PROJECT_ID,
    storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_APP_APP_ID
}

文件夹结构

​

​

Answer 1

我也犯了同样的错误。我使用的是命名导出，但我通过更改为默认导出来解决这个问题。

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

export default auth

Answer 2

可以将initialValue设置为apiKey字符串(而不是空字符串)，如下所示

apiKey: process.env.NEXT_PUBLIC_API_KEY || 'mock_key'

Answer 3

我认为这是因为apikey的初始值需要一个字符串，而不是一个空的。

// firebase.js/firebaseConfig
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY || 'mock_key'