React+Firebase：如何等待用户认证完成后调用useDocument钩子

问题根源在于userAuthContext返回的user是异步加载的，组件初始化阶段user还处于undefined状态，直接访问user.uid会抛出错误，同时useDocument也无法处理无效参数。以下是几种实用解决方案：

方案1：条件渲染+加载状态拦截 #

先判断user是否存在，不存在时展示加载提示，确保useDocument只在user有效时被调用：

const { user } = userAuthContext()

// 拦截user未加载的情况
if (!user) {
  return <div>加载中...</div>
}

// user有效后再调用useDocument
const profile = useDocument("members", user.uid)

// 额外处理useDocument的加载/错误状态
if (profile.loading) {
  return <div>加载用户档案中...</div>
}

if (profile.error) {
  return <div>获取档案失败：{profile.error.message}</div>
}

return (
    <div>
        <p>{profile.name}</p>
    </div>
)

这种方式逻辑清晰，能避免无效请求，同时给用户明确的加载反馈。

方案2：修改useDocument钩子支持可选参数 #

让useDocument在传入的文档ID为undefined时不发起请求，返回空状态或加载状态，配合可选链操作符简化组件逻辑：

修改useDocument实现： #

function useDocument(collection, docId) {
  const [document, setDocument] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    // 文档ID无效时直接终止请求
    if (!docId) {
      setDocument(null)
      setLoading(false)
      return
    }

    setLoading(true)
    const unsubscribe = db.collection(collection).doc(docId)
      .onSnapshot(doc => {
        setDocument(doc.exists ? { ...doc.data(), id: doc.id } : null)
        setLoading(false)
      }, err => {
        setError(err)
        setLoading(false)
      })

    return unsubscribe
  }, [collection, docId])

  return { document: document, loading, error }
}

组件中使用： #

const { user } = userAuthContext()
// 用可选链操作符传递uid，user未定义时传入undefined
const { document: profile, loading, error } = useDocument("members", user?.uid)

if (loading) {
  return <div>加载中...</div>
}

if (error) {
  return <div>获取档案失败：{error.message}</div>
}

if (!profile) {
  return <div>用户档案不存在</div>
}

return (
    <div>
        <p>{profile.name}</p>
    </div>
)

这种方式把参数校验逻辑封装到钩子内部，组件代码更简洁。

方案3：使用React Suspense（适合并发模式项目） #

如果你的React版本支持Suspense，可以让userAuthContext和useDocument在数据加载时抛出Promise，由Suspense统一处理加载状态：

修改userAuthContext支持Suspense： #

function useAuth() {
  const [user, setUser] = useState(null)
  const [pending, setPending] = useState(true)

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setUser(user)
      setPending(false)
    })
    return unsubscribe
  }, [])

  // 未加载完成时抛出Promise，触发Suspense的fallback
  if (pending) {
    throw new Promise(resolve => setTimeout(resolve, 0))
  }

  return { user }
}

修改useDocument支持Suspense： #

function useDocument(collection, docId) {
  const [document, setDocument] = useState(null)
  const [pending, setPending] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (!docId) {
      setPending(false)
      return
    }

    const unsubscribe = db.collection(collection).doc(docId)
      .onSnapshot(doc => {
        setDocument(doc.exists ? { ...doc.data(), id: doc.id } : null)
        setPending(false)
      }, err => {
        setError(err)
        setPending(false)
      })

    return unsubscribe
  }, [collection, docId])

  if (pending) {
    throw new Promise(resolve => setTimeout(resolve, 0))
  }

  if (error) {
    throw error
  }

  return document
}

组件中用Suspense包裹： #

function Profile() {
  const { user } = userAuthContext()
  const profile = useDocument("members", user.uid)

  return (
    <div>
      <p>{profile.name}</p>
    </div>
  )
}

// 父组件中使用Suspense统一处理加载
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Profile />
    </Suspense>
  )
}

注意：使用Suspense时需要配合错误边界组件捕获加载失败的异常，确保页面不会崩溃。

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