TypeError: null is not an object (evaluating 'docs.forEach')

[ifgabriel]

import React, { Component } from 'react'; import { View, Text, Button, StyleSheet, Image, ScrollView} from 'react-native'; import HeaderTitle from './HeaderTitle'

import firestore from '@react-native-firebase/firestore'

class ListProduct extends Component { state = { listFood: [] } constructor(props) { super(props); this.subscriber = firestore() .collection("Foods") .onSnapshot(docs => { let listFood = [] docs.forEach(doc => { listFood.push(doc.data()) }) this.setState({ listFood }) }) } render() { return (

{this.state.listFood.map((listFood, index) => {listFood.name} {listFood.description} R${listFood.price} R${listFood.pricePromotion} )}

    );
}

} const styles = StyleSheet.create({ //Products boxProducts: { height: 150, width: '98%', marginBottom: 15, borderWidth: 0.5, borderRadius: 8, backgroundColor: '#eee', borderColor: '#dddddd' }, card: { flexDirection: 'row', flex: 1, }, cardImg: { flex: 1, }, ImageProducts: { width: '90%', height: '100%', borderWidth: 5, borderTopLeftRadius: 8, borderBottomLeftRadius: 8, }, TextProducts: { flex: 1, }, NameProducts: { paddingTop: 10, fontWeight: 'bold', color: '#f5872b', fontSize: 20, }, descriptionMenu: { paddingTop: 10, height: 55, textAlign: 'justify', width: '90%', color: '#919190', }, valueMenu: { paddingTop: 10, textDecorationLine: 'line-through', color: '#d2d2d2', }, valueMenuValid: { fontWeight: 'bold', fontSize: 15, paddingTop: 2, color: '#f5872b', }, });

export default ListProduct;

[ifgabriel]

Eu estou tentando retorna todos os produtos da minha lista no firebase, porém ele retorna esse erro, a lista aparece, porém o erro acontece toda vez que compila. Sem contar que, o banco não está atualizando, eu altero o banco porém no app ele não reconhece nenhuma alteração.

firebase

firestore

react-native