javascript - 如何查找未知的 Firebase 文档？

Question

我正在用 HTML 和 Firebase 建立一个朋友/追随者系统。我已经制作了一个添加新朋友的页面。当我按下“添加朋友”按钮（下图）时，我希望后端找到文件到 li 中的配置文件，但我不知道如何找到确切的文件。您还可以在下面看到我的 Firestore 结构。

Javascript：

firebase.auth().onAuthStateChanged(function(user) {

    db.collection('users').get().then(function(snapshot) {
        console.log(snapshot.docs)
        setupFindFriends(snapshot.docs)
    })

    const findfriends = document.querySelector('.findfriends');

    const setupFindFriends = (data) => {

        let html = '';
        data.forEach(doc => {
            const friend = doc.data();
            const li = `
            <li>
                <div class="name">${friend.Fullname}</div>
                <img class="friendpfp" src="${friend.pfpURL}">
                <button class="addfriend">Add friend</button>
            </li>
            `;
            html += li
        })

        findfriends.innerHTML = html;

    };

});

Firestore 布局

标签： javascripthtmlfirebasegoogle-cloud-firestore

Answer 1

您必须将文档 ID 传递给addFriend()函数。大致如下（未经测试）：

firebase.auth().onAuthStateChanged(function(user) {

    db.collection('users').get().then(function(snapshot) {
        console.log(snapshot.docs)
        setupFindFriends(snapshot.docs)
    })

    const findfriends = document.querySelector('.findfriends');

    const setupFindFriends = (data) => {

        let html = '';
        data.forEach(doc => {
            const friend = doc.data();
            const li = `
            <li>
                <div class="name">${friend.Fullname}</div>
                <img class="friendpfp" src="${friend.pfpURL}">
                <button class="addfriend" onclick="addFriend('${friendId}')">Add friend</button>
            </li>
            `;
            html += li
        })

        findfriends.innerHTML = html;

    };

});

function addFriend(friendId) {
    console.log(friendId);
 
    // Do something with friendId, e.g. create or update a Firestore doc, etc ... 
}