Firestore collection not found

Question

I have a firestore collection that I'm trying to retrieve, however I am unable to access it. I know it exists because I have another component that is able to add to it.

Component adding to the collection

import React from 'react'
import firebase from 'firebase';


class NewItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        itemName: '',
        itemQuantity: 0,
        itemLocation: ''
      }
  }

  updateInput = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  }

  addItem = e => {
    e.preventDefault();
    const db = firebase.firestore();
    db.collection('items').add({
      itemName: this.state.itemName,
      itemQuantity: this.state.itemQuantity,
      itemLocation: this.state.itemLocation
    });
    this.setState({
      itemName: '',
      itemQuantity: 0,
      itemLocation: ''
    });
  };

  render () {
    return (
      <form onSubmit={this.addItem}>
        <input
          type="text"
          id="itemName"
          placeholder="Item Name"
          onChange={this.updateInput}
          value={this.state.itemName}
        />
         <input
          type="text"
          id="itemQuantity"
          placeholder="Item Quantity"
          onChange={this.updateInput}
          value={this.state.itemQuantity}
        />
         <input
          type="text"
          id="itemLocation"
          placeholder="Item Location"
          onChange={this.updateInput}
          value={this.state.itemLocation}
        />
        <button type="submit">Create New Iventory Item</button>
      </form>
    )
  }
};

export default NewItem;

Component trying to access the collection

import React from 'react';
import Item from './Item';
import NewItem from './NewItem';
import firebase from 'firebase';

class ItemField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemBoxes: null,
      data: null

    }
  }

  componentDidMount() {
    this.onLoad();
  }

  onLoad = (e) => {
    const db = firebase.firestore();
    const items = db.collection('items');
    items.get().then((doc) => {
        if (doc.exists) {
            let data = doc.data();
            this.setState({ data: data });
            console.log("Document data:", data);
        } else {
            // doc.data() will be undefined in this case
            this.setState({ data: null });
            console.log("No such document!");
        }
    }).catch(function (error) {
        this.setState({ data: null });
        console.log("Error getting document:", error);
    }); 
  }

  getBoxesToRender(){
    let numberOfItemBoxesToRender = [];
    for (let i = 0; i < this.state.itemBoxes; i++) {
      numberOfItemBoxesToRender.push(<Item key={i} />)
    }
    return numberOfItemBoxesToRender;
  }

  render () {
    return (
      <div>
        <NewItem />
        <div className='item-field'>
        {this.getBoxesToRender()}
        </div>
      </div>
    )
  }
};

export default ItemField;

The onLoad function runs and just returns that the collection doesn't exist. I know there is data present in the collection, so I am unsure why it is not seeing it.

Answer 1

hey can you try by this way

db.collection("items").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
    });
});