Javascript 使用doc.data（）时如何将变量指定为字段名持有者。在firebase中检索数据

我正在尝试从firebase cloud firestore接收数据。我有一个名为“profiles”的集合，一个名为user的文档，我有一些字段，比如最喜欢的音乐、最喜欢的书、最喜欢的电影。我想根据从html页面接收的输入接收数据

我想在data.doc.get上传递变量get。我应该如何重写此代码以使其正常工作

JS代码

db.collection("profiles").doc("user").get().
then(snapshot => {
    snapshot.doc.forEach(
        doc => {
            displayfunction(doc)
        });
)
});

document.getElementById("hit")
    .addEventListener("submit", function() {
        var get = document.getElementById("fav").value;

        function displayfunction(doc) {
            let requested_item = document.createElement('p');
            requested_item.textContent = doc.data().get;
            var displayele = document.getElementById("display");
            displayele.appendChild(requested_item);
        }

    })

html代码

<select id="fav">
<option value="favorite_music">my music</option>
<option value="favorite_book">my book</option>
</select>
<div id="display">
</div>
<button type="submit" id="hit"> submit </button>

我的音乐
我的书
提交

这应该可以。代码的问题是，您在顶部运行查询，与

submit

事件无关。您的

displayFunction

也被限定为

submit

处理程序的作用域，因此不能在该作用域之外调用它

您真正想要的是定义一个函数来获取文档--

getUserProfiles

--并在

submit

事件中调用它。您通过

getUserProfiles

一个回调来完成这项工作

document.getElementById('hit').addEventListener('submit', function() {
  getUserProfiles(function displayFunction(doc) {
    const displayEl = document.getElementById('display');
    const requestedItem = document.createElement('p');
    const data = doc.data();

    requestedItem.textContent = data.whateverMyAttributeNameIs;

    displayEl.appendChild(requestedItem);
  });
});

function getUserProfiles(callback) {
  return db
    .collection('profiles')
    .doc('user')
    .get()
    .then(snapshot => {
      snapshot.doc.forEach(callback);
    });
}

---

我试过了，但似乎不起作用。