FirebaseError：Firebase：需要提供选项，当没有通过源部署到主机时

Question

我正在尝试学习如何将 Next.js 项目与 Firebase 连接起来。

我在 config.js 文件中有这段代码：

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
...

};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore();

export { auth, db };

实际上我在其他代码中犯了这个错误，所以我在堆栈溢出中找到了相同问题的答案，现在我有了这段代码但仍然无法正常工作，我不知道为什么。

之前的版本是：

import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
...

};

if (!firebase.apps.length) {
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);  
}else {
  firebase.app(); // if already initialized, use that one 
}  

export default firebase

这是我在 package.json 中的内容：

{
  "name": "events_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "firebase": "^9.19.1",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "reactstrap": "^9.1.9",
    "sass": "^1.60.0"
  },
  "devDependencies": {
    "dotenv": "^16.0.3"
  }
}

这是auth.js

import firebase from 'firebase/compat/app';

import { getAuth
    , signOut
    , onAuthStateChanged
    , signInWithEmailAndPassword
    , createUserWithEmailAndPassword  
} from "firebase/auth";

const registrerWithEmail = async (email, password) => {
    const auth = getAuth(); 
    return createUserWithEmailAndPassword(auth, email, password).then((userCredential) => { 
        const user = userCredential.user;  
          
        return { user }
    }).catch((error) => { 
        const errorCode = error.code;
        const errorMessage = error.message;  
        return { 
            error: errorCode + ': ' + errorMessage
        }
    })

}

const signWithEmail = async (signInEmail, signInPassword) => { 
    const auth = getAuth();
    
    return signInWithEmailAndPassword(auth, signInEmail, signInPassword)
    .then((userCredential) => {  
        const user = userCredential.user; 
        return { user }
    }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('Error: ', errorCode + ': ' + errorMessage) 
        return { 
            error: errorCode + ': ' + errorMessage
        }
    })
}

const signOutUser = async () => {  
    const auth = getAuth();
    return signOut(auth).then(() => { 
        return {
            suscess: true
        }
      }).catch((error) => { 
        return {
          error
        }
      })
}

const authState = async (userFnc) => {
    const auth = getAuth();
    onAuthStateChanged(auth, userFnc); 
}

const getCurrentUser = () => { 
    const auth = getAuth();
    const user = auth.currentUser; 
    return user 
 }

export default { 
    registrerWithEmail,
    signWithEmail,
    signOutUser,
    getCurrentUser,
    authState
}

我希望有人能帮助我。 谢谢。

Answer 1

1. 无需将

   compat

   版本的导入与现代 NPM

   firebase

   包混合使用。 Compat 是专门为支持旧的导入样式而创建的。请删除所有

   firebase/compat/*

   的导入。只需使用

   firebase/auth

   、

   firebase/app

   、

   firebase/firestore

   .
   的直接模块化导入

2. config.js

   中的更新代码看起来不错：

   import { initializeApp } from 'firebase/app';
   const firebaseConfig = {
   ...
   
   };
   
   export const app = initializeApp(firebaseConfig);
   export const auth = getAuth(app);
   

   config.js 应该是：
   a) （推荐）在 React 的根目录下导入，在

   index.js

   或

   App.js

   文件中，例如：

   import * from './path-to/firebase/config.js';
   
   export const App = () => {
     //...
   }
   

   然后就可以在应用程序的任何地方不带参数调用

   getAuth()

   ，将自动使用

   app = initializeApp(firebaseConfig)

   的默认实例。

   b) 如果不在 React 根目录（

   index.js

   或

   App.js

   ）导入 firebase 初始化，则需要指定要使用的 FirebaseApp 和 Firebase Auth 实例。因此，您需要从 config.js` 导入所有已初始化的

   auth

   ，例如：

    // notice the Firebase Auth was initialized as `getAuth(app)` inside config.js, below it is reused:
   import { auth } from './path-to/firebase/config.js';
   
   const authState = async (userFnc) => {
      onAuthStateChanged(auth, userFnc); 
   }