Esto parece fácil y me falta algo obvio, pero un poco de historia:

Estoy haciendo una aplicación web simulada de "informe de errores". La aplicación tiene dos tipos de usuario: "usuario" e "ingeniero". Al registrarse, al usuario se le asigna un tipo y se guarda en una colección de "usuarios" de firebase bajo un identificador único de firebase "uid".

Al iniciar sesión en la aplicación web, se recupera de Firebase un objeto de usuario de Firebase para el usuario que inició sesión. Este objeto tiene "user.uid" en él.

Para obtener el tipo de usuario (guardado como tipo de usuario en el documento de Firebase), necesito tomar ese usuario.uid y enviar la parte uid a un gancho de reacción que he creado. Este enlace luego obtiene el documento con ese uid y devuelve el tipo de usuario.

He creado el siguiente archivo ficticio para demostrarlo.

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

Ahora, el problema que tengo es que "usuario" no se inicializa desde Contexto a tiempo antes de que el programa intente ir a buscarlo, usando un uid que, nuevamente, no se inicializa a tiempo.

Básicamente, solo necesito una forma de retrasar el uso del gancho useDocument, pero no puedo hacer que los ganchos sean asincrónicos. Mis habilidades asíncronas no son mi punto fuerte, por decir lo menos.

Cualquier ayuda es enormemente apreciada, he pasado tantas horas tratando de descifrar esto.

EDITAR: A pedido, aquí está el enlace 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 } }