javascript Next.js类型错误：(0，防火墙身份验证WEBPACKIMPORTEDMODULE_1__.onAuthStateChanged)不是函数

pod7payv 于 2023-01-04 发布在 Java

关注(0)|答案(4)|浏览(96)

我是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 };

请帮我解决这个问题，先谢了！

JavaScript

来源：https://stackoverflow.com/questions/69815534/next-js-typeerror-0-firebase-auth-webpack-imported-module-1-onauthstatech

4条答案

按热度按时间

h5qlskok1#

随着时间的推移，firebase版本升级到了版本9+，firebase hooks也改变了整个结构，所以，你只需要转到你的package.json文件，把你的“firebase”版本改为"firebase": "8.0.0"。
现在在同一个package.json文件中查找“react-firebase-hooks”，并将其版本从当前版本更改为"react-firebase-hooks": "^3.0.4"。
现在，打开您的终端并运行yarn install，这将解决版本问题。

赞(0）回复(0）举报 2023-01-04

rryofs0p2#

“火线”：“8.2.1”，
“React-火力基地-挂钩”：“^2.2.0”，
这配置为我工作。我的React-火力基地-钩子是^5.0.0

赞(0）回复(0）举报 2023-01-04

8xiog9wr3#

您可以检查用户是否已通过验证。如果"user"不为"null"，则用户已通过验证。如果"user"为"null"，则用户尚未通过验证。
方法一

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);

  if (user) {
    return <Component {...pageProps} />;
  } else {
    return <Login />;
  }
}

export default MyApp

方法二
错误会告诉你问题出在哪里。

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, loading, error] = useAuthState(auth);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!user) {
    return <Login />;
  }

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

export default MyApp

方法三
如果上述方法失败，请将"auth check"代码 Package 在"onAuthStateChange"函数中，如下所示：

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

function MyApp({ Component, pageProps }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.onAuthStateChanged(function(currentUser) {
      if (currentUser) {
        setUser(currentUser);
      }
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (user) {
    return <Component {...pageProps} />;
  } else {
    return <Login />;
  }
}

export default MyApp

"currentUser"表示经过身份验证的用户。

赞(0）回复(0）举报 2023-01-04

42fyovps4#

被同一错误卡住
只需转到节点模块并将react-firebase-hook的版本从4.0.0更改为3.0.4。
然后一个简单的Yarn安装就会解决这个问题...

赞(0）回复(0）举报 2023-01-04