javascript - 如何从查询列表(来自 Firestore)获取单击文档的 ID？

Question

我想实现一个可点击的 Firestore 列表，如下所示 Onclick interface video ，但我无法使用 javascript for web。这是我尝试过的:

这是来自 https://cloud.google.com/firestore/docs/query-data/get-data 的查询示例.

db.collection("cities").where("capital", "==", true)
.get()
.then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
        var id = doc.data().id;
        var templ = "";
        templ = 
        "Id: "+id+"<br>";
        document.getElementById("cities-list").innerHTML += templ;  
    });
})

我可以在 div 中显示查询，但是如何将按钮或可点击的 div(例如按钮 onclick 部分)附加到每一行，通过它我可以获取单击项目的 id 并将此 id 写入 div，如下所示 document.getElementById("结果列表").innerHTML = doc.id？像这样的按钮部分给了我错误的元素关闭错误。

templ = 
"Id: "+id+"<br>"+
"<button onclick='getElementById('cityDetail').innerHTML="+ id +"'>Set clicked city</button><br>";
document.getElementById("cities-list").innerHTML += templ;

我是初学者，谢谢您的建议。

Answer 1

db.collection("cities").where("capital", "==", true)
.get()
.then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
        var uid = doc.data().uid;
        var name = doc.data().name;
        var templ = "";
        templ = 
        `'Uid:' ${uid} '<br>'
        `'Name:' ${name} '<br>'`;
        document.getElementById("cities-list").innerHTML += templ;  
    });
})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});