TypeError: _app.default.auth 不是一个函数 - React Native Web - Firebase

Question

我目前正在 React Native Web 上开发一个项目，这是我在组件中的登录调用。 （调用在组件useEffect中，组件一打开，就应该匿名登录）

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
const firebaseConfig = {
        apiKey: "****",
        authDomain: "****",
        projectId: "****",
        storageBucket: "****",
        messagingSenderId: "****",
        appId: "****",
        measurementId: "****"
      };
      firebase.initializeApp(firebaseConfig) 

const login = async () => {
        firebase.auth().signInAnonymously() 
            .then((userCredential) => {
                // Signed in
                // ...
              })
              .catch((error) => {
                console.log("LOG: "+error)
              });
    } 

但每次我得到错误：未捕获（承诺）类型错误：_app.default.auth 不是函数

我尝试了几种不同的导入方式，但似乎都不起作用。 当我在 Firefox 上打开控制台时，我看到了错误。我该如何解决这个问题？

谢谢

Answer 1

通过检查 firebase 是否已初始化且用户未登录来尝试此方法：

const [loggedIn, setLoggedIn] = React.useState(false)

React.useEffect(() => {
    if (!firebase.apps.length) {
        firebase.initializeApp({
            apiKey: "****",
            authDomain: "****",
            projectId: "****",
            storageBucket: "****",
            messagingSenderId: "****",
            appId: "****",
            measurementId: "****"
        });
    }
}, [])

React.useEffect(() => {
    if (firebase.apps.length && !loggedIn) {
        setLoggedIn(true)
        login()
    }
}, [firebase])

const login = async () => {
    firebase.auth().signInAnonymously()
        .then((userCredential) => {
            // Signed in
            // ...
        })
        .catch((error) => {
            console.log("LOG: " + error)
        });
}