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>