如何使 doc.id 可点击项目？

Question

如何将 doc.id 变成可点击项目？ 现在我可以从我的数据库中获取数据，我可以列出所有 doc.id，但我想将它们制作成超链接，当按下它时，它会从数据库中获取数据并将其数据显示为画布上的绘图。有道理吗？

doc.id 是保存在我的 firestore 数据库中的唯一 ID。

const allDrawings = document.querySelector('#allDrawings');

function renderDrawings(doc){
    let li = document.createElement('li');
    let key = document.createElement('doc.id');

    li.setAttribute('data-id', doc.id);
    key.textContent = doc.id;

    li.appendChild(key);

    allDrawings.appendChild(li);

}

db.collection('joonistused').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderDrawings(doc);
        console.log(doc.id);
    })
})

Answer 1

我相信您正在寻找的是一种设计/逻辑，用于在浏览器的 firestore 集合中列出文档并使它们列出项目。然后，您希望单击一个项目并将该文档的内容显示给用户。这将需要您的编程逻辑。您将需要编写在单击链接时调用的浏览器/客户端 JavaScript (onclick)。到达 JavaScript 代码后，您将需要对 Firestore 数据库进行 Web 客户端调用以检索相应的文档。

见：https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference.html#get

这看起来也很有用：

Firebase Firestore Tutorial #3 - Getting Documents

Answer 2

如果您只是想在 DOM 中创建锚点，请尝试以下操作：

const anchor = document.createElement('a');
anchor.href = `/some/path/to/${doc.id}`;
anchor.innerText = `Document ID ${doc.id}`;

// <a href="/some/path/to/123">Document ID 123</a>