Fetching data from firestore collection in react js

Question

I have three different collections of database in firestore and i want to fetch the data from all these collections into my admin panel table. From the students collections i have to get the details of the students and from other two collections feedback and the details, i have to get feedback and extra informations from the details collections. At the first i am fetching my students collection data, and inside my admin table i have to fetch feedback and the extra informations details in the table along the students details. The problem is i am getting undefined document, and in the console i am getting No doc found. message.

My code looks like this.

import React, { useEffect, useState } from 'react';
import MaterialTable from 'material-table';
import AdminNavbar from '../../layout/AdminNavbar';
import firebase from '../../../config/fbConfig';

const Dashboard = () => {
  const [tableData, settableData] = useState({
    id: "",
    name: "",
    course: "",
    email: "",
    phone: "",
    createdAt:""
  });

  useEffect(() => {
    getdata();
  }, []);

  async function getdata() {
    const ref = firebase
      .firestore()
      .collection("students").doc();
    ref.get().then((doc) => {
      const feedbackdata = doc.data();
      console.log(feedbackdata);
      if (doc.exists) {
        settableData({
          id: feedbackdata.id,
          name: feedbackdata.name,
          course: feedbackdata.course,
          email: feedbackdata.email,
          phone: feedbackdata.phone,
          createdAt: feedbackdata.createdAt
        });
      } else {
        console.log("No doc found!");
      }
    });
  }

  const tableCol = [
    {
      title: "Student ID",
      field: "id"
    },
    {
      title: "Name",
      field: "name"
    },
    {
      title: "Course",
      field: "course"
    },
    {
      title: "Email",
      field: "email"
    },
    {
      title: "Phone",
      field: "phone"
    },
    {
      title: "Submitted at",
      field: "createdAt"
    }
  ];
  
    return (
        <>
            <AdminNavbar />
            <div className="table-div">
                <MaterialTable
          title={"Student's Feedback"}
          data={tableData}
          columns={tableCol}
          
          options={{
            headerStyle: {
              backgroundColor: "#01579b",
              color: "#FFF"
            },
            exportButton: true,
            selection: false,
            search: true
          }}
          
        />
            </div>

        </>
    );
}

export default Dashboard;

Answer 1

Your usage of the Firestore module here is incorrect. Make sure to take a look at the Firestore Docs for basic examples.

In your code:

async function getdata() {
    const ref = firebase
      .firestore()
      .collection("students").doc(); // THIS IS INVALID

The doc method expects the name of a document to fetch - your current usage doesn't tell Firestore which document you want

// You want a particular document
    const ref = firebase
      .firestore()
      .collection("students").doc("<documentIdHere>");

// You want to get the list of documents in the student collection
    const ref = firebase
      .firestore()
      .collection("students");
    const snapshot = await ref.get();
    snapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
    });

More complex examples and use cases can be found in the Firestore Docs and are often discussed in other StackOverflow questions.