【发布时间】：2020-09-17 11:00:16
【问题描述】：
我正在尝试从 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
任何人都可以请参考我如何从云 Firestore 数据库中获取 ImageUrl 到网站。我正在制作网站，它只会同时获取用户个人资料图像和名称并显示在网站内。我已经在 firebase Storage 中上传了图片，并将 ImageUrl 链接保存在 cloud firestore 数据库中。我只是想检索已存储在我的云数据库中的个人资料图像和名称。
请帮助我，我从过去 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>
【问题讨论】：
-
您正在设置
posts_div，然后您尝试设置posts.innerHTML，这可能是导致错误的原因。您还需要从document.getElementById('#posts');中删除主题标签（错误消息非常简单：代码中某处有一个x.innerHTML，但x是null的意思） -
@Chris G. 从（帖子）中删除 # 后未定义的值显示在网站内以及为什么在网站内创建了一些额外的卡片后它不起作用。我只调用图像和名称。请查看链接 photos.app.goo.gl/7FdqigUaVCmkFuyW7
-
对，所以
value.image未定义，value.fname未定义，我猜。console.log(data)的输出是什么？ -
@Chris G. 请查看链接photos.app.goo.gl/hmV3byG9VE6RH51d6。为什么检索值未定义？我的云 Firestore 数据库中有价值
-
您能否记录从 Firebase 返回的数据？如果是的话，那么这个问题就是你的 Js 的问题了。
标签： javascript html node.js firebase google-cloud-firestore