Firebase Firestore ver 9 Uncaught (in promise) TypeError: n is undefined

Question

I have an Orders.jsx file -

import "./Orders.css";

import React, { useCallback, useEffect, useState } from "react";
import { collection, doc, getDocs, orderBy, query } from "@firebase/firestore";

import { db } from "./firebase";
import { useStateValue } from "./StateProvider";

function Orders() {
    const [{ user }] = useStateValue();
    const [orders, setOrders] = useState([]);

    const fetchData = useCallback(async () => {
        console.log("User in orders: ", user);
        const myQuery = query(
            collection(db, "users", user?.uid, "orders"),
            orderBy("created", "desc")
        );

        const ordersSnapshot = await getDocs(myQuery);
        ordersSnapshot.forEach((doc) => {
            console.log(doc.id, "=>", doc.data());
        });
    }, [user]);

    useEffect(() => {
        fetchData();
    }, [fetchData]);
    return (
        <div className="orders">
            <h1>Your Orders</h1>
        </div>
    );
}

export default Orders;

this is the error that I get in the console and the website breaks because of it -

Uncaught (in promise) TypeError: n is undefined
    fromString index.esm2017.js:1028
    bc index.esm2017.js:14931
    fetchData Orders.jsx:15
    Orders Orders.jsx:27
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    Webpack 58
index.esm2017.js:1028

I read the docs of multiple documents Query firestore and query method and I believe I have followed it correctly.

Also after a few seconds the console shows the required items

pi_3JmvgVSDCQEtZc6S0Prn6ji3 => Object { created: 1634801251, basket: (1) […], amount: 179900 }    Orders.jsx:22
pi_3Jmvf7SDCQEtZc6S1r5tIVse => Object { amount: 329800, created: 1634801165, basket: (2) […] }    Orders.jsx:22
pi_3JmvdxSDCQEtZc6S1WLNIeec => Object { amount: 458900, created: 1634801093, basket: (2) […] }    Orders.jsx:22
pi_3JmvJ1SDCQEtZc6S0rBxmNsN => Object { amount: 6228300, basket: (5) […], created: 1634799795 }   Orders.jsx:22

How to fix this?

EDIT: My working solution as of now-

.
.
.

try {
            if (user) {
                const myQuery = query(
                    collection(db, "users", user?.uid, "orders"),
                    orderBy("created", "desc")
                );
                // Get the snapshot which is real-time values and will update when there is a change in the DB
                const ordersSnapshot = await getDocs(myQuery);

                setOrders(
                    ordersSnapshot.docs.map((doc) => ({
                        id: doc.id,
                        data: doc.data(),
                    }))
                );
            } else {
                setOrders([]);
            }
            // ordersSnapshot.forEach((doc) => {
            //  console.log(doc.id, "=>", doc.data());
            // });
        } catch (error) {
            console.error(error);
        }
        .
        .
        .

However I still get the error, but I just log it to the console

Answer 1

So,firstly I got the same error actually I faced the same situation .

Reason :

So what is happening in this situation is that when you are making a fetch request from firebase your user.uid is undefined and that's why you are getting error "TypeError: n is undefined".

So what I have observed in your case is that you must have stored the currentuser in your StateProvider so that it make it accessible to the whole app and then you are importing your user from StatProvider in the Orders.jsx file to make a fetch request .

But what's actually happening is that when you are importing the user from StateProvider its actually taking time for user.uid to render the value ,so for few second's it render the value of user.uid as undefined then after few seconds it render the correct value and till the time it renders the value you have already made a fetch request from firebase with undefined uid which resulted in error .

In order to fix this
At the time of storing the currentuser in StateProvider just store the user.uid in the localStorage .

localStorage.setItem("uid",currentuser.uid);

And at the time of making the fetch request instead of using user.uid you can get the value of uid from localStorage which will resolve the error.

try {
            if (user) {
                const myQuery = query(
                    collection(db, "users", localStorage.getItem("uid"), "orders"),
                    orderBy("created", "desc")
                );
                // Get the snapshot which is real-time values and will update when there is a change in the DB
                const ordersSnapshot = await getDocs(myQuery);

                setOrders(
                    ordersSnapshot.docs.map((doc) => ({
                        id: doc.id,
                        data: doc.data(),
                    }))
                );
            } else {
                setOrders([]);
            }
            // ordersSnapshot.forEach((doc) => {
            //  console.log(doc.id, "=>", doc.data());
            // });
        } catch (error) {
            console.error(error);
        }