未捕获的类型错误：无法使用网站读取 null 的属性“uid”答案

【问题标题】：Uncaught TypeError: Cannot read property 'uid' of null using website未捕获的类型错误：无法使用网站读取 null 的属性“uid”
【发布时间】：2018-07-11 07:39:15
【问题描述】：

我想从 firestore 获取注册用户详细信息到 html 页面。当用户单击我的个人资料页面时，它会导航到下一个 html 页面，其中包含名字和姓氏等字段。此字段已在注册页面时输入。所以我想将这些详细信息从 firestore 获取到下一个 html 页面。但我收到了类似“无法读取 null 的属性 'uid'”的错误。如何解决这个问题，这是我的 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>

【问题讨论】：

在获取用户数据之前检查user对象。如果未登录，currentUser 将为空。
用户已登录，其详细信息存储在其身份验证 ID 下。但细节并没有恢复。

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

【解决方案1】：

你的错误是Cannot read property 'uid' of null。这意味着您在页面加载时正在加载myProfile() 这个函数，到那时user 可能为空。从 firebase 获取身份验证详细信息会有延迟。试试这个方法

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

【讨论】：

什么是用户已经登录？那么他的身份就不会改变
@LuísSoares 它返回一个 observable，这意味着它可以检测到变化