title: Undefined variable but has the correct value
body: <p>I have a problem. I get the information of a user via firestore and I want to create a dynamic textfield with the username. So I'm saving the name of the user in a variable. But when I call the username variable later, it is undefined. What is the problem? With console.log in <code>docRef.get().then(function (doc) { ... }</code>  the correct value is there, but the problem is at <code>document.getElementById("user_para").innerHTML = "Welcome User : " + user.username;</code></p>
  
  <pre><code>var username;
  var kontostand;
  var ticket;
  
  
  
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in.
      document.getElementById("user_div").style.display = "block";
      document.getElementById("login_div").style.display = "none";
  
      var docRef = db.collection("users").doc(user.uid);
  
      // Get the data from the user
      docRef.get().then(function (doc) {
        if (doc.exists) {
          //console.log("Document data:", doc.data());
          kontostand = doc.data().kontostand;
          ticket = doc.data().ticket;
          username = doc.data().username;
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      }).catch(function (error) {
        console.log("Error getting document:", error);
      });
  
      var user = firebase.auth().currentUser;
  
      if (user != null) {
  
        document.getElementById("user_para").innerHTML = "Welcome User : " + username;
  
      }
  
    } else {
      // No user is signed in.
      document.getElementById("user_div").style.display = "none";
      document.getElementById("login_div").style.display = "block";
  
  
    }
  });
  </code></pre>