Firestore Uncaught TypeError: doc.data не является функцией

Question

Когда я хочу отобразить данные из firestore в html node.js, я получаю сообщение об ошибке в следующих 2 кодах: productName.textContent = doc.data (). Name; и productPrice. textContent = doc.data (). цена;

const myProducts = db.collection('products');
const productsContainer = document.querySelector('#groceries');

 function renderProduct(doc) {
   const docFrag = document.createDocumentFragment();
   let article = document.createElement('article');
   let productName = document.createElement('h4');
   let productPrice = document.createElement('p');

   article.setAttribute('id', doc.id);
   productName.textContent = doc.data().name;
   productPrice.textContent = doc.data().price;

   docFrag.appendChild(productName);
   docFrag.appendChild(productPrice);

   article.appendChild(docFrag);
   productsContainer.appendChild(article);
 }

 myProducts.onSnapshot(products => {
   products.forEach(doc => {
     products = doc.data();
     console.log(products);
     renderProduct(products);
   });
 });

 class shop extends React.Component {

    render() {
        return (
            <div className="app-wrapper">
                <ContainerHeader match={this.props.match} title={<IntlMessages id="appModule.contactSupport"/>}/>
                <div className="d-flex justify-content-center">
                    <div id="groceries"></div>

                </div>
            </div>
        );
    }
}

Answer 1

Похоже, вы передаете данные, а не ссылку на документ renderProduct, поэтому вы просто обращаетесь к реквизитам напрямую:

function renderProduct(data) {
   // ...
   article.setAttribute('id', data.id);
   productName.textContent = data.name;
   productPrice.textContent = data.price;
   // ...

Answer 2

Ваш код передает необработанные данные JavaScript в renderProduct:

 products = doc.data();
 console.log(products);
 renderProduct(products);

Он уже вызывает doc.data(), чтобы получить этот объект. Но затем функция продолжает вызывать data() для того же объекта:

productName.textContent = doc.data().name;
productPrice.textContent = doc.data().price;

Просто удалите дополнительные вызовы на data(). Возможно, вы также захотите переименовать параметр с doc на data, чтобы было более понятно, что он ожидает.

productName.textContent = doc.name;
productPrice.textContent = doc.price;