How to read a sub-collection's document fields from Firestore in react-native

2
votes

Trying to read all sub collections from a document inside a root-level collection from firebase's Firestore in a react-native project. Not too sure which documentation to follow (web-can't do getCollections() /node?). Firebase is imported and I have successfully retrieved other data from firestore, but never have I been able to read sub collection data. This is not using the library react-native-firebase (Although I’ve tried with react-native-firebase and it has no documented solution to this either) Regardless, I've tried:

componentDidMount() {
    firebase
      .firestore()
      .collection('users')
      .doc(this.props.user.uid)
      .getCollections('conversations')
      .then(collections => {
        collections.forEach(collection => {
          alert(collection.id)
        })
      }) 
}

the above returns '_firebase.default.firestore().collection("users").doc(this.props.user.uid).getCollections' is undefined

also have tried:

componentDidMount() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.props.user.uid)
      .collection("conversations")
      .get()
      .then(collections => {
        collections.forEach(collection => {
          alert(JSON.stringify(collection)); //collection.id is can be read here
        });
      });

in the above, the collection id can be read, but how can the document fields be read? the above gives me cyclic structure errors.

alert(collection.data()) gives me [object Object]

alert(JSON.stringify(collection.data()) gives me cyclic structure errors

here is the firestore:

enter image description here

enter image description here

The practical application would be populating all conversations for a given user, and then all messages for a given conversation. How Do I read data from all sub collections from Firestore in a react-native project?

2
firebasereact-nativegoogle-cloud-firestorereact-native-firebase

2 Answers

2
votes

To read the sub-collection document data what ultimately worked was:

_getConversation() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.props.user.uid)
      .collection("conversations")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(queryDocumentSnapshot => {
          alert(queryDocumentSnapshot.get("members"));
        });
      })
      .catch(err => {
        alert(err);
      });
  }

and 

_getMessages() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.props.user.uid)
      .collection("conversations")
      .doc("some-document-id-here")
      .collection("messages")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(queryDocumentSnapshot => {
          alert(queryDocumentSnapshot.get("content"));
        });
      });
  }

a deeper dive into documentation was indeed more helpful

1
votes

Hi try with below 

async _getUserDataFromFirestore() {
        try {
          const ref = firebase
            .firestore()
            .collection('user')
            .doc(this.props.user.uid);
          await ref.get().then(userData => {
           console.log('User details of userID - ' + this.props.user.uid , userData.data());
          });  
        } catch (err) {
          console.log('Error while getting user data from firestore : ', err);
        }
      }

Add call this function in componentDidMount