由于缺少初始状态而无法处理请求（Firebase）

Question

我网站的一位用户在尝试从他的 chrome 浏览器（移动设备）在我的 React 网站上使用 GitHub 进行注册时遇到了错误消息。我已将 Firebase GitHub 登录与弹出方法集成。

由于缺少初始状态，无法处理请求。如果浏览器 sessionStorage 无法访问或意外清除，则可能会发生这种情况。

注册代码：

import { useEffect, useState } from "react"
import { GithubAuthProvider, signInWithPopup } from "firebase/auth"

import { auth } from "../firebase/config"
import { createUserProfileDocument } from "../firebase/createUserProfileDocument"

import { useAuthContext } from "./useAuthContext"

export const useSignup = () => {
  const [error, setError] = useState(false)
  const [isPending, setIsPending] = useState(false)
  const [isCancelled, setIsCancelled] = useState(false)
  const provider = new GithubAuthProvider()
  const { dispatch } = useAuthContext()

  const signup = async () => {
    setError(null)
    setIsPending(true)
    try {
      const res = await signInWithPopup(auth, provider)
      if (!res) {
        throw new Error("Could not complete signup")
      }
      const user = res.user
      await createUserProfileDocument(user)
      dispatch({ type: "LOGIN", payload: user })

      if (!isCancelled) {
        setIsPending(false)
        setError(null)
      }
    } catch (error) {
      if (!isCancelled) {
        setError(error.message)
        setIsPending(false)
      }
    }
  }

  useEffect(() => {
    return () => setIsCancelled(true)
  }, [])
  return { signup, error, isPending }
}

useAuthContext 代码：

import { useContext } from "react"

import { AuthContext } from "../context/AuthContext"

export const useAuthContext = () => {
  const context = useContext(AuthContext)

  if (!context) {
    throw Error("useAuthContext must be used inside an AuthContextProvider")
  }

  return context
}

AuthContext 代码

import { createContext, useEffect, useReducer } from "react"
import { onAuthStateChanged } from "firebase/auth"

import { auth } from "../firebase/config"
import { authReducer } from "../reducers/authReducer"

export const AuthContext = createContext()

export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    authIsReady: false,
  })

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      dispatch({ type: "AUTH_IS_READY", payload: user })
    })
    return unsubscribe
  }, [])

  return (
    <AuthContext.Provider value={{ ...state, dispatch }}>{children}</AuthContext.Provider>
  )
}

firebaseConfig 对象：

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
}

initializeApp(firebaseConfig)

const db = getFirestore()

const auth = getAuth()

export { auth, db, logEvent }

Answer 1

我也遇到了同样的问题，后来通过更换浏览器解决了。

前往设置。

打开应用程序。

选择google，然后将默认浏览器更改为chrome

也将其更改为三星浏览器中的Chrome。

这对我有帮助。