Next.js TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_1__.onAuthStateChanged) 不是函数

Question

我是 Next.js 开发的新手。我正在按照 Youtube 教程构建 Whatsapp 克隆。我使用firebase8.9作为数据库

我想检查用户是否已登录，然后转到主页，否则重定向到登录页面。

import '../styles/globals.css'
import { useAuthState } from "react-firebase-hooks/auth"
import { auth, db } from "../firebase"
import Login from "./login"

function MyApp({ Component, pageProps }) {

  const [user] = useAuthState(auth);

  

  return <Component {...pageProps} />;
}

export default MyApp

我的 firebase.js 文件

import firebase from 'firebase';


const firebaseConfig = {
    apiKey: "apikey",
    authDomain: "authdomain",
    projectId: "projectid",
    storageBucket: "storagebucket",
    messagingSenderId: "messagingsenderid",
    appId: "appid"
  };


const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app();

const db = app.firestore();

const auth = app.auth();

const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

请帮我解决这个问题。提前致谢！

Answer 1

随着时间的推移，firebase版本已经升级到9+版本，并且firebase hooks整个结构也发生了变化。因此，您只需转到您的package.json文件并将“firebase”版本更改为"firebase": "8.0.0".

现在在同一文件中查找“react-firebase-hooks”package.json并将其版本更改为"react-firebase-hooks": "^3.0.4"当前版本。

现在，打开终端并运行yarn install，这将解决版本问题。