React集成Firebase Auth时报错onAuthStateChanged不是函数如何解决？

错误根因 #

你在App.js和Signin.js中错误导入了未初始化的Firebase auth命名空间，没有使用你自己在firebase.js中已经完成初始化的Firebase实例对象，所以无法调用auth相关的实例方法。

修复步骤 #

1. 修改App.js代码

import React, { useState, useEffect } from 'react'
import { Routes, Route } from 'react-router'
// 删除错误导入：import { auth } from 'firebase'
import firebase, { FirebaseContext } from './firebase'

import Ordenes from './components/paginas/Ordenes'
import Menu from './components/paginas/Menu'
import NuevoPlato from './components/paginas/NuevoPlato'
import Sidebar from './components/ui/Sidebar'
import Signin from './components/Signin'

function App() {

  const [user, setUser] = useState(null)
  useEffect(() => {
    // 从初始化后的firebase实例调用auth方法
    const unsubscribe = firebase.auth.onAuthStateChanged(userAuth => {
      const user = {
        uid: userAuth?.uid,
        email: userAuth?.email
      }
      if (userAuth) {
        console.log(userAuth)
        setUser(user)
      } else {
        setUser(null)
      }
    })
    return unsubscribe
  }, [])

  return (
    <FirebaseContext.Provider
      value={{
        firebase
      }}
    >
      <div className="md:flex min-h-screen" >
        {/* 删除重复的Sidebar标签，避免重复渲染侧边栏 */}
        <div className="md:w-2/5 xl:w-4/5 p-6">
          {user ? 
            <>
              <Sidebar />
              {/* 路由移到登录判断内部，未登录用户无法直接访问业务页面 */}
              <div className="md:w-2/5 xl:w-4/5 p-6">
                <Routes>
                  <Route path="/" element={<Ordenes />} />
                  <Route path="/menu" element={<Menu />} />
                  <Route path="/nuevo-plato" element={<NuevoPlato />} />
                </Routes>
              </div>
            </>
          : <Signin />}
        </div>
      </div>
    </FirebaseContext.Provider>
  )
}

export default App

2. 修改Signin.js代码

import React, { useRef } from 'react'
// 删除错误导入：import { auth } from 'firebase'
import firebase from '../firebase'

const Signin = () => {
    const emailRef = useRef(null);
    const passwordRef = useRef(null);
    const signUp = e => {
        e.preventDefault();
        // 从初始化后的firebase实例调用auth方法
        firebase.auth.createUserWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    const signIn = e => {
        e.preventDefault();
        // 从初始化后的firebase实例调用auth方法
        firebase.auth.signInWithEmailAndPassword(
            emailRef.current.value,
            passwordRef.current.value
        ).then(user => {
            console.log(user)
        }).catch(err => {
            console.log(err)
        })
    }
    return (
        <div className="mb-4">
            <form action="">
                <h1>Sign in</h1>
                <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={emailRef} type="email" placeholder="email"/>
                <input 
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                ref={passwordRef} type="password" />
                <button onClick={signIn}>Sign in </button>
            </form>
        </div>
    )
}

export default Signin

修复完成后重启开发服务即可解决报错。

内容的提问来源于stack exchange，提问作者Miguel Espeso