jQuery 函数在 Promise.then() 中不可用

Question

我在我的网站上使用这个 jQuery 库实现了一个线程评论板。

这是我的index.html的一部分，其中评论数据是从 Firebase 下载的，并通过库显示在前端。

作为实验，我尝试在一个元素（例如body ）中显示一个评论板。 在下面的第一个代码中，它不会抛出任何错误。 但是，这不是调用评论板函数的正确位置，因为该函数必须使用来自 Firebase 的数据。

因此，我将 jQuery 函数移至db.collection的then方法（第二个代码），以便评论函数可以获取来自 Firebase 的所有数据（存储在querySnapshot中）。

然后第二个抛出错误

未捕获（承诺）TypeError: $(...).comments is not a function

为什么会这样？ jQuery 函数如何正确使用来自 Firebase 的数据？

---

第一个代码

<script>
window.onload = () => {
  $("body").comments({
    profilePictureURL: 'sample-icon.png',
    getComments: (success, error) => {
      var commentsArray = [{
          ...
      }];
      success(commentsArray);
    }
  });
  const db = firebase.firestore()
  db.collection("projects").get().then(querySnapshot => {
   ...
  })
}
</script>

第二码

<script>
window.onload = () => {
  const db = firebase.firestore()
  db.collection("projects").get().then(querySnapshot => {
    $("body").comments({
      profilePictureURL: 'sample-icon.png',
      getComments: (success, error) => {
        var commentsArray = [{
          ...
        }];
        success(commentsArray);
      }
    });
  })
}
</script>

这是我网站文件结构的一部分

/public        <--- Hosting on Firebase
  index.html
  /forum
    index.html <--- the index.html shown in the question above
  /css
    jquery-comment.css <--- from the jQuery library
  /js
    jquery-comment.js <---  from the jQuery library

Answer 1

 <script> window.onload = () => { const db = firebase.firestore() // use a closure const jq = $; db.collection("projects").get().then(querySnapshot => { jq("body").comments({ profilePictureURL: 'sample-icon.png', getComments: (success, error) => { var commentsArray = [{... }]; success(commentsArray); } }); }) } </script>