Question

我尝试从Cloud Firestore数据库中获取imageURL和名称。但是检索失败，并且网页上没有显示任何值。在检查了正确的值之后，将在控制台内打印该值，但是与此控制台一起在innerHTML中显示了一些错误。谁能概述一下这两个代码（Html＆Js），然后告诉我我做过的错误和错误在哪里？

错误：

defualt.js:22 Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null
at defualt.js:22
at database.ts:2202
at document_set.ts:97
at Wg.ut (sorted_map.ts:324)
at Wg.ut (sorted_map.ts:323)
at Hg.ut (sorted_map.ts:136)
at k_.forEach (document_set.ts:96)
at gN.forEach (database.ts:2201)
at defualt.js:8

有人可以请我介绍如何从Cloud Firestore数据库获取ImageUrl到网站。我正在制作一个网站，该网站只会一起提取用户个人资料图片和名称并显示在网站内部。我已经将图像上传到firebase存储中，并将ImageUrl链接保存在云存储数据库中。我只是想检索已经存储在我的云数据库中的个人资料图片和名称。

请帮助我，我从最近5天开始面临这个问题，它会让我发觉找到结果。我已经阅读了Firestore的文档，但对我不是很有帮助。我尝试了下面的代码，但是它不起作用，存储的值不是

Js代码：

db.collection("student entry").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());

      var posts_div=document.getElementById('#posts');
 posts.innerHTML="";
 var data=doc.data();
 console.log(data);
for(let[key,value] of Object.entries(data)){
posts_div.innerHTML="<div class='col-sm-4 mt-2 mb-1'>"+
"<div class='card'>"+
"<img src='"+value.image+"' style='height:250px;'>"+
"<div class='card-body'><p class='card-text'>"+value.fname+"</p>"+
"<button class='btn btn-danger' id='"+key+"' onclick='delete_post(this.id)'>Delete</button>"+
"</div></div></div>"+posts_div.innerHTML;

}
  });
});

HTML代码：

<html>
    <head>
        <title>Blogs</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <div class="container mt-2">

            <div class="row mt-4" id="posts">

            </div>

        </div>

<!-- The core Firebase JS SDK is always required and must be listed first...make sure you remove -app from below line -->
<script src="https://www.gstatic.com/firebasejs/7.14.2/firebase.js"></script>

<script>
    // Initialize Firebase
    var config = {
        apiKey: " ",
        authDomain: " ",
       databaseURL: " ",
       projectId: " ",
       storageBucket: " ",
      messagingSenderId: " ",
      appId: " ",
      measurementId: " "
    };
    firebase.initializeApp(config);
    var db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true }); 
</script>


        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="defualt.js"></script>
    </body>
</html>

enter image description here

Answer 1

使用#时不需要getElementById。 document.getElementById('posts');应该可以。

未捕获（承诺）TypeError：无法读取null的属性“ innerHTML”？

1 个答案: