Estoy intentando hacer algo bastante simple sin embargo no he podido. Utilizando firebase, js y react, estoy intentando imprimir en mi página un dato de un usuario desde la firestore (en la firestore tengo una colección llamada "infoUsuarios" y los documentos que tiene esta colección tienen por nombre a la uid de cada usuario que me da Auth). El fallo que me está ocurriendo es cuando le entrego los valores requeridos al código que me traerá los datos... en la sección que solicita el nombre del documento al entregarle la variable "uid" mi dato no se imprime, a no ser que recargue la página, sin embargo si escribo el nombre del documento solicitado como un string directamente (es decir la uid del usuario) mi dato llega perfectamente. Esto me lleva a pensar que la variable "uid" no se carga a tiempo, y el resto del código se ejecuta sin ella, por lo que finalmente no imprime nada. No se si este método es el más adecuado, simplemente quiero imprimir en mi página los datos de mis usuarios. Espero se entienda bien la pregunta, y si alguien puede ayudar le agradecería mucho !
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
var user = firebase.auth().currentUser;
if (user != null) { var uid = user.uid; }
const db = firebase.firestore();
var docRef = db.collection("infoUsuarios").doc(uid) //no funciona ):
//var docRef = db.collection("infoUsuarios").doc('C1S90auTbucRA7V2UiqdmdE5u133') //así si funciona
const dataNombre = function() {
docRef.onSnapshot(function (doc) {
const saludar = document.getElementById("saludar");
if (doc && doc.exists){
saludar.innerText = "Bienvenido " + doc.data().Nombre;
}
});
}
export default function nombreUser() {
return (
<div>
<h1 id="saludar" onLoad={dataNombre()}></h1>
</div>
)
};