jQuery функция недоступна в Promise.then ()

Question

Я внедряю многопотоковую доску комментариев на своем веб-сайте с этой jQuery библиотекой .

Вот часть моей index.html, где данные комментариев загружаются из Firebase и отображаются в передней части через библиотеку.

Для эксперимента я попытался отобразить доску комментариев в элементе (например, body). В первом коде ниже он не выдает никакой ошибки. Однако, это не то место, где можно вызывать функцию доски комментариев, потому что функция должна использовать данные из Firebase.

Итак, я переместил функцию jQuery в метод then db.collection (второй код), чтобы функция комментариев могла получить все данные из Firebase (хранящиеся в querySnapshot).

Тогда второй выдает ошибку

Uncaught (в обещании) TypeError: $ (...). Comments не является функцией

Почему это происходит? Как функция 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>