Почему я не могу использовать forEach для этого объекта?

Question

это работает

const itemsParent = document.querySelector('.items');
let items = [];

const renderItems = items => {

  items.forEach(item => {

    const div = document.createElement('div');
    div.className = 'item';

    div.innerHTML = `
      <img class="itemImgBackground" src="assets/${item.name.replace(" ", "")}.png">
      <img class="itemImg" src="assets/${item.name.replace(" ", "")}.png">
      <span class="itemName"><a href="item.html?id=${item.id}">${item.name}</a></span>
      <span class="itemCondition">${item.condition}</span>
      <span class="itemPrice">${item.price}</span>
    `;

    itemsParent.appendChild(div);

  });
}

db.collection('items').get().then((querySnapshot) => {
  console.log(typeof(querySnapshot));
  querySnapshot.forEach(doc => {
    docData = doc.data();
    docData['id'] = doc['id'];
    items.push(docData);
  });

  console.log(items);
  renderItems(items);

});

но это не

const itemParent = document.querySelector('.item_full');
let params = new URLSearchParams(location.search);

var itemID = params.get('id');

var docRef = db.collection('items').doc(itemID);

docRef.get().then(doc => {
    doc.forEach(field => {
        console.log(field); 
    })
}).catch(function(error) {
    console.log("Error getting document:", error);
});

они оба объекты, так что это не имеет смысла.

Answer 1

Вы можете использовать .forEach() только для массивов и некоторых массивоподобных объектов, которые реализуют итерационный протокол Javascript .

Объект, возвращаемый db.collection().get(), представляет собой набор документов, поэтому он реализует протокол итерации.

Объект, возвращаемый db.collection().get().doc() - это всего лишь один документ. Нет необходимости перебирать один элемент, поэтому он не реализует этот протокол. Просто получите доступ к свойствам напрямую.

docRef.get().then(doc => {
    Object.keys(doc).forEach(field => console.log(field, doc[field]));
}).catch(function(error) {
    console.log("Error getting document:", error);
});