时间戳

首页 > 解决方案 > Firestore 的空值

javascript - Firestore 的空值

问题描述

所以基本上，我无法在我的 html 上显示集合。我收到 gamesList 的空值错误。但是当我将它登录到控制台时，我可以看到内容很好，没有问题。

// get data
db.collection('games').get().then(snapshot => {
    setupGames(snapshot.docs);
});

// DOM elements
const gamesList = document.querySelector('.games');

// setup games
const setupGames = (data) => {

  let html = '';
  data.forEach(doc => {
    const game = doc.data();
    const li = `
      <li>
        <div class="collapsible-header grey lighten-4">${game.title}</div>
        <div class="collapsible-body white">${game.content}</div>
    
    `;

        html += li
        
  });

  gamesList.innerHTML = html;

}

所以这里出了点问题，对于我的生活，我无法弄清楚。

但是当我使用它时，数据确实在控制台、标题和内容中正确显示：

// setup guides
const setupGames = (data) => {

  let html = '';
  data.forEach(doc => {
    const game = doc.data();
    console.log(game);
  });


}

标签： javascriptfirebasegoogle-cloud-firestore

解决方案

我认为，当您在集合上使用 get() 函数时，它已经返回文档列表，因此您无需调用snapshot.docs

这里有一个例子： https ://firebase.google.com/docs/firestore/query-data/get-data#g​​et_all_documents_in_a_collection

如果您想将实时数据与快照一起使用，请尝试以下方式：

db.collection('games').onSnapshot(snapshot => {
    setupGames(snapshot.docs);
});

推荐阅读