如何獲取用戶點擊的文檔的文檔ID？

Question

JS：

function getDataOfBus() {
   var dates = document.getElementById('departure-date').value.toString();
   var fromd = document.getElementById('from-dest').value.toString()
   var tod = document.getElementById('to-dest').value.toString()
   console.log(dates + " -" + fromd + " -" + tod)

   db.collection('Buses').where("DepartureDate", "==", dates).where("To", "==", tod).
   where("From", "==", fromd).get().then((snapshot) => {
      let html = '';
      snapshot.forEach((busDatas) => {
         busData = busDatas.data()
         console.log(busData.id)
         html += `
           <div class="single-room-area d-flex align-items-center mb-50 wow fadeInUp" data-wow-delay="100ms" id="prince">
            <div class="room-thumbnail">
                <img src="${busData.ImageLink}" alt="">
            </div>
            <div class="room-content">
                <h2><a href="javascript:setImage();">${busData.TourName}</h2>
                <h6>${busData.From} to ${busData.To}</h6>
                <h4>₹ ${busData.SeatPrice} </h4>
                <div class="room-feature">
                    <h6>Boarding Point  <span>${busData.BoardingTime}</span></h6>
                    <h6>Dropping Point <span>${busData.DroppingTime}</span></h6>
                    <h6>Seats Left <span>${busData.SeatsLeft}</span></h6>
                    <h6>Total Time <span>${busData.TotalTime}</span></h6>
                    <h6>Departure Date <span>${busData.DepartureDate}</span></h6>
                </div>
            </div>
           </div>
         `

         document.getElementById('bus-container-dynamic').innerHTML = html;
      }) // End foreach
   }) // End then

}

function setImage() {

}   

我已經執行了上面的代碼來顯示來自雲 Firestore 的文檔。 但是我不知道如何獲取用戶單擊的文檔的文檔 ID，並在setImage() function 中使用該文檔 ID？

Answer 1

通過執行busData = busDatas.data()您將data()方法返回的 object 分配給busData變量，但此 object 不包含文檔 ID。

您應該使用另一個變量來保存此值或將文檔 ID 分配給此busData object。 以下（實施第二個選項）應該可以解決問題：

snapshot.forEach((busDatas) => {

    var busData = busDatas.data()
    busData.docId = busDatas.id
    //...

    <h2><a href="javascript:setImage('${busData.docId}');">${busData.TourName}</h2>
    //...

});

---

busDatas （帶有 s）是一個QueryDocumentSnapshot並且您使用它的id屬性。

---

您還可以使用擴展語法，如下所示：

var busData = { docId: busDatas.id, ...busDatas.data() }