1

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

1 respuesta 1

0

Tienes un problema de asincronía, tu suposición es correcta, la página carga sin estos datos que necesitas, te recomiendo que busques técnicas para manejar este tipo de problemas cómo async/await

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"




const dataNombre = async function() {

  //Usando await/async vamos a esperar a que cargue el usuario antes de seguir con el código
  let {currentUser : user} = await firebase.auth();
  
  if (user != null) {
    var uid = user.uid;
  }
  
  const db = firebase.firestore();

  //Aquí tambien esperamos a tener un resultado
  var docRef = await db.collection("infoUsuarios").doc(uid)
  
  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 >
  )
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.