未捕获的TypeError:无法读取属性' uid' null使用网站

时间:2018-02-01 03:39:49

标签: javascript firebase-authentication google-cloud-firestore

我想从firestore获取注册用户详细信息到html页面。当用户点击我的个人资料页面时,它会导航到下一个html页面,其中包含名字和姓氏等字段。这些字段已在注册页面输入。所以我想从firestore获取这些细节到下一个html页面。但我得到的错误就像"无法阅读财产' uid' of null"。如何解决这个问题这是我的html页面:

<!doctype html>
<html lang="en">
    <head>
        <title> deyaPay</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
         <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
         <script>
          var config = {
    apiKey: "AIzaSyAJsAstiMsrB2QGJyoqiTELw0vsWFVVahw",
    authDomain: "websignin-79fec.firebaseapp.com",
    databaseURL: "https://websignin-79fec.firebaseio.com",
    projectId: "websignin-79fec",
    storageBucket: "",
    messagingSenderId: "480214472501"
  };
   firebase.initializeApp(config);
   </script>
   <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-firestore.js"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
   <style>
   // css goes here..
   </style> 
   <script type="text/javascript">
      function myProfile() {
          var user = firebase.auth().currentUser.uid;
          var db = firebase.firestore();
          var docRef = db.collection("deyaPayusers").doc(user);
          docRef.get().then(function(doc) {
             if(doc && doc.exists) {
             const myData = doc.data();
             const ffname = myData.FirstName;
             const llname = myData.LastName;
             const phonen = myData.PhoneNumber;
             document.getElementById("fname").value = ffname;
             document.getElementById("lname").value = llname;
             document.getElementById("phone").value = phonen;

        }
        }).catch(function(error) {
        console.log("Got an error: ",error);
        });
      }  

    </script>
   </head>
   <body onload='myProfile()'>
      <div class= "login-form">
          <form method="post">
             <h2>Profile</h2>
              <div class="form-group">
                  <input type="text" name="firstname" id="fnmae" placeholder="FirstName" class="form-control" >
              </div>
               <div class="form-group">
                  <input type="text" name="lastname" id="lnmae" placeholder="LastName" class="form-control" >
              </div>
              <div class="form-group">
                 <input type="text" name="phone" id="phone" placeholder="PhoneNumber" class="form-control" >
              </div>

          </form>
      </div>

   </body>
 </html>                

1 个答案:

答案 0 :(得分:4)

您的错误是Cannot read property 'uid' of null。这意味着您在页面加载时加载myProfile()此函数,到那时user可能为空。从firebase获取auth详细信息会有滞后。试试这种方式

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var db = firebase.firestore();
      var docRef = db.collection("deyaPayusers").doc(user.uid);
      docRef.get().then(function(doc) {
         if(doc && doc.exists) {
         const myData = doc.data();
         const ffname = myData.FirstName;
         const llname = myData.LastName;
         const phonen = myData.PhoneNumber;
         document.getElementById("fname").value = ffname;
         document.getElementById("lname").value = llname;
         document.getElementById("phone").value = phonen;

    }
    }).catch(function(error) {
    console.log("Got an error: ",error);
    });
  } else {
    // No user is signed in.
  }
});