基于火箱角色的访问与React（异步困扰）

Question

这是一个有点冗长的内容，我会力求简洁，但如果我错过了任何内容，显然会提供更多信息。

我正在创建一个模拟“错误报告应用程序”。这个应用程序有两种“类型”的用户 - “用户”和“工程师”。计划是在上下文或本地状态中使用这些类型来有条件地渲染路线。注册后，userType 存储在 firebase 中的用户文档内：

9AytcWiVI4OghrYzf8Jl7BeYhlb2 <-uid
displayName: "eng1"
online: true
photoURL: "https://avatars.dicebear.com/api/bottts/eng1.svg"
userType: "engineer"

我正在尝试根据当前用户从文档中收集“userType”，并将其存储在状态中，但我遇到了真正的麻烦，我认为这是来自同步性或缺乏同步性。

目前，我在上下文中存储了一个 firebase 用户对象：

import { createContext, useReducer, useEffect } from 'react'
import { projectAuth } from '../firebase/config'

export const AuthContext = createContext()

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, user: action.payload }
    case 'LOGOUT':
      return { ...state, user: null }
    case 'AUTH_IS_READY':
      return { user: action.payload, authIsReady: true }
    default:
      return state
  }
}

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

  useEffect(() => {
    const unsub = projectAuth.onAuthStateChanged(user => {
      dispatch({ type: 'AUTH_IS_READY', payload: user })
      unsub()
    })
  }, [])

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

}

我可以在任何组件中轻松地调用它，并足够轻松地再次访问 user.uid，并且它可以 100% 地被控制台记录。

然后，我尝试使用该 user.uid 访问用户文档，访问“userType”键，但它“无法读取属性”，而以前是这样。

我一直在绞尽脑汁地想知道如何解决这个问题，但我再次认为它在实际访问 user.uid 之前尝试访问它，

感谢任何和所有帮助。

编辑澄清

用户输入他们的电子邮件地址和密码进行登录，这会调用我的 useLogin 挂钩。

import { useState, useEffect } from 'react'
import { projectAuth, projectFirestore } from '../firebase/config'
import { useAuthContext } from './useAuthContext'

export const useLogin = () => {
  const [isCancelled, setIsCancelled] = useState(false)
  const [error, setError] = useState(null)
  const [isPending, setIsPending] = useState(false)
  const { dispatch } = useAuthContext()

  const login = async (email, password) => {
    setError(null)
    setIsPending(true)
  
    try {
      // login
      const res = await projectAuth.signInWithEmailAndPassword(email, password)


      //update online status on the database
      await projectFirestore.collection("users").doc(res.user.uid).update({online: true})
      

      // dispatch login action
      dispatch({ type: 'LOGIN', payload: res.user })

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

      }
    }
  }

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

  return { login, isPending, error }
}

有两个用于访问 firestore 数据库的钩子， useCollection:

import { useEffect, useState, useRef } from "react"
import { projectFirestore } from "../firebase/config"

export const useCollection = (collection) => { //,_query
  const [documents, setDocuments] = useState(null)

  const [error, setError] = useState(null)


  // const query = useRef(_query).current
  // const orderBy = useRef(_orderBy).current

  useEffect(() => {
    let ref = projectFirestore.collection(collection)

    // if (query) {
    //   ref = ref.where(...query)
    // }
    // if (orderBy) {
    //   ref = ref.orderBy(...orderBy)
    // }


    const unsubscribe = ref.onSnapshot(snapshot => {
      let results = []
      snapshot.docs.forEach(doc => {
        results.push({...doc.data(), id: doc.id})
      });
      
      // update state
      setDocuments(results)

      setError(null)
    }, error => {
      console.log(error)
      setError('could not fetch the data')
    })

    // unsubscribe on unmount
    return () => unsubscribe()

  }, [collection]) // orderBy, query, 

  return { documents, error }
}

和 useDocument:

import { useEffect, useState } from "react"
import { projectFirestore } from "../firebase/config"


export const useDocument = (collection, id) => {

  const [document, setDocument] = useState(null)
  const [error, setError] = useState(null)

  // realtime document data
  useEffect(() => {
    const ref = projectFirestore.collection(collection).doc(id)

    const unsubscribe = ref.onSnapshot(snapshot => {
      // need to make sure the doc exists & has data

      if(snapshot.data()) {
        setDocument({...snapshot.data(), id: snapshot.id})
        setError(null)
        
      }
      else {
        setError('No such document exists')
      }
    }, err => {
      console.log(err.message)
      setError('failed to get document')
    })

    // unsubscribe on unmount
    return () => unsubscribe()

  }, [collection, id])

  return { document, error }
}

我创建的一个虚拟组件文件来尝试解决这个问题：

import {React, useEffect, useState} from 'react'
import { useAuthContext } from '../../hooks/useAuthContext'
import { useDocument } from '../../hooks/useDocument'




export default function User() {
    const { user } = useAuthContext();
    console.log("uid: " + user.uid)

    const id = user.uid;
    console.log("id: " + id)

    let { document, error } = useDocument("users", id)
    console.log("userType: " + document.userType)

  return (
    <div>


    </div>
  )
}

在第一次完成文件时，它会很好地通过 useDocument 并返回所有信息要求。但在重新加载应用程序时，我收到以下错误：

User.js:16 Uncaught TypeError: Cannot read properties of null (reading 'userType')
    at User (User.js:16:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
User @ User.js:16
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ AuthContext.js:27
(anonymous) @ subscribe.ts:104
(anonymous) @ subscribe.ts:233
Promise.then (async)
ObserverProxy.sendOne @ subscribe.ts:230
ObserverProxy.forEachObserver @ subscribe.ts:220
ObserverProxy.next @ subscribe.ts:103
(anonymous) @ auth.js:1532
(anonymous) @ auth.js:1996
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:475
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:469
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
(anonymous) @ rpchandler.js:924
(anonymous) @ rpchandler.js:611
Dd @ eventtarget.js:336
H.dispatchEvent @ eventtarget.js:460
li @ xhrio.js:864
k.Jc @ xhrio.js:811
k.Vb @ xhrio.js:788
XMLHttpRequest.send (async)
ei @ xhrio.js:607
Ii.u @ rpchandler.js:644
Si @ rpchandler.js:549
(anonymous) @ rpchandler.js:921
D @ promise.js:164
Yi @ rpchandler.js:920
(anonymous) @ rpchandler.js:2677
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:567
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:486
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:469
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
d.onsuccess @ indexeddb.js:318
IndexedDB (async)
(anonymous) @ indexeddb.js:292
D @ promise.js:164
tk @ indexeddb.js:291
uk @ indexeddb.js:346
c @ indexeddb.js:364
D @ promise.js:164
vk @ indexeddb.js:386
k.set @ indexeddb.js:465
(anonymous) @ hybridindexeddb.js:70
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
E @ promise.js:346
Ck @ hybridindexeddb.js:57
Tk @ authstorage.js:191
Vk @ authstorage.js:234
un @ storageusermanager.js:90
En @ auth.js:121
instanceFactory @ exports_auth.js:759
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
instanceFactory @ exports_auth.js:771
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
t @ prebuilt.js:14376
t @ prebuilt.js:14644
e @ prebuilt.js:15237
(anonymous) @ index.ts:39
(anonymous) @ config.ts:80
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
FirebaseAppImpl._getService @ firebaseApp.ts:126
firebaseAppImpl.<computed> @ firebaseNamespaceCore.ts:228
serviceNamespace @ firebaseNamespaceCore.ts:209
./src/firebase/config.js @ config.js:19
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/context/AuthContext.js @ UsersBar.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/hooks/useAuthContext.js @ config.js:27
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/App.js @ dash.svg:34
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/index.js @ useSignup.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Show 47 more frames
react_devtools_backend.js:3973 The above error occurred in the <User> component:

    at User (http://localhost:3000/static/js/bundle.js:935:76)
    at div
    at Dashboard (http://localhost:3000/static/js/bundle.js:2514:74)
    at Routes (http://localhost:3000/static/js/bundle.js:87145:5)
    at div
    at Router (http://localhost:3000/static/js/bundle.js:87078:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:86554:5)
    at div
    at App (http://localhost:3000/static/js/bundle.js:159:76)
    at AuthContextProvider (http://localhost:3000/static/js/bundle.js:1172:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ AuthContext.js:27
(anonymous) @ subscribe.ts:104
(anonymous) @ subscribe.ts:233
Promise.then (async)
ObserverProxy.sendOne @ subscribe.ts:230
ObserverProxy.forEachObserver @ subscribe.ts:220
ObserverProxy.next @ subscribe.ts:103
(anonymous) @ auth.js:1532
(anonymous) @ auth.js:1996
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:475
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:469
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
(anonymous) @ rpchandler.js:924
(anonymous) @ rpchandler.js:611
Dd @ eventtarget.js:336
H.dispatchEvent @ eventtarget.js:460
li @ xhrio.js:864
k.Jc @ xhrio.js:811
k.Vb @ xhrio.js:788
XMLHttpRequest.send (async)
ei @ xhrio.js:607
Ii.u @ rpchandler.js:644
Si @ rpchandler.js:549
(anonymous) @ rpchandler.js:921
D @ promise.js:164
Yi @ rpchandler.js:920
(anonymous) @ rpchandler.js:2677
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:567
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:545
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:486
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
a.onsuccess @ indexeddb.js:441
IndexedDB (async)
(anonymous) @ indexeddb.js:469
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
(anonymous) @ promise.js:167
d.onsuccess @ indexeddb.js:318
IndexedDB (async)
(anonymous) @ indexeddb.js:292
D @ promise.js:164
tk @ indexeddb.js:291
uk @ indexeddb.js:346
c @ indexeddb.js:364
D @ promise.js:164
vk @ indexeddb.js:386
k.set @ indexeddb.js:465
(anonymous) @ hybridindexeddb.js:70
e.g @ promise.js:826
Sc @ promise.js:1165
Oc @ promise.js:1136
k.gc @ promise.js:1107
xc @ run.js:124
Promise.then (async)
uc @ run.js:55
tc @ run.js:32
Pc @ promise.js:1027
zc @ promise.js:900
E @ promise.js:346
Ck @ hybridindexeddb.js:57
Tk @ authstorage.js:191
Vk @ authstorage.js:234
un @ storageusermanager.js:90
En @ auth.js:121
instanceFactory @ exports_auth.js:759
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
instanceFactory @ exports_auth.js:771
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
t @ prebuilt.js:14376
t @ prebuilt.js:14644
e @ prebuilt.js:15237
(anonymous) @ index.ts:39
(anonymous) @ config.ts:80
Provider.getOrInitializeService @ provider.ts:302
Provider.getImmediate @ provider.ts:115
FirebaseAppImpl._getService @ firebaseApp.ts:126
firebaseAppImpl.<computed> @ firebaseNamespaceCore.ts:228
serviceNamespace @ firebaseNamespaceCore.ts:209
./src/firebase/config.js @ config.js:19
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/context/AuthContext.js @ UsersBar.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/hooks/useAuthContext.js @ config.js:27
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/App.js @ dash.svg:34
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:61
./src/index.js @ useSignup.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Show 47 more frames
react_devtools_backend.js:3973 TypeError: Cannot read properties of null (reading 'userType')
    at User (User.js:16:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

事实上它可以工作，然后重新加载后就不起作用，这让我怀疑我可以用异步性来修复它（？？），但我只是不知道如何解决。