Firebase Firestore 版本 9 未捕获（承诺）TypeError：n 未定义

Question

我有一个Orders.jsx文件 -

\n

import "./Orders.css";\n\nimport React, { useCallback, useEffect, useState } from "react";\nimport { collection, doc, getDocs, orderBy, query } from "@firebase/firestore";\n\nimport { db } from "./firebase";\nimport { useStateValue } from "./StateProvider";\n\nfunction Orders() {\n    const [{ user }] = useStateValue();\n    const [orders, setOrders] = useState([]);\n\n    const fetchData = useCallback(async () => {\n        console.log("User in orders: ", user);\n        const myQuery = query(\n            collection(db, "users", user?.uid, "orders"),\n            orderBy("created", "desc")\n        );\n\n        const ordersSnapshot = await getDocs(myQuery);\n        ordersSnapshot.forEach((doc) => {\n            console.log(doc.id, "=>", doc.data());\n        });\n    }, [user]);\n\n    useEffect(() => {\n        fetchData();\n    }, [fetchData]);\n    return (\n        <div className="orders">\n            <h1>Your Orders</h1>\n        </div>\n    );\n}\n\nexport default Orders;\n

\n

这是我在控制台中收到的错误，网站因此而中断 -

\n

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

\n

我阅读了多个文档 Query firestore的文档和querymethod

\n

几秒钟后控制台也会显示所需的项目

\n

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

\n

如何解决这个问题？

\n

编辑：我现在的工作解决方案-

\n

pi_3JmvgVSDCQEtZc6S0Prn6ji3 => Object { created: 1634801251, basket: (1) [\xe2\x80\xa6], amount: 179900 }    Orders.jsx:22\npi_3Jmvf7SDCQEtZc6S1r5tIVse => Object { amount: 329800, created: 1634801165, basket: (2) [\xe2\x80\xa6] }    Orders.jsx:22\npi_3JmvdxSDCQEtZc6S1WLNIeec => Object { amount: 458900, created: 1634801093, basket: (2) [\xe2\x80\xa6] }    Orders.jsx:22\npi_3JmvJ1SDCQEtZc6S0rBxmNsN => Object { amount: 6228300, basket: (5) [\xe2\x80\xa6], created: 1634799795 }   Orders.jsx:22\n

\n

但是我仍然收到错误，但我只是将其记录到控制台

\n

Answer 1

所以，首先我遇到了同样的错误，实际上我面临着同样的情况。

原因 ：

因此，在这种情况下发生的情况是，当您从 firebase 发出 fetch 请求时，您的user.uid未定义，这就是您收到错误“TypeError: n is undefined”的原因。

因此，我在您的案例中观察到，您必须将当前用户存储在 StateProvider 中，以便整个应用程序可以访问它，然后您从 Orders.jsx 文件中的 StatProvider 导入您的用户以发出获取请求。

但实际发生的情况是，当您从 StateProvider 导入用户时，user.uid实际上需要时间来呈现该值，因此几秒钟内它会将user.uid的值呈现为未定义，然后几秒钟后它就会呈现正确的值直到它呈现该值时，您已经使用未定义的 uid 从 firebase 发出了获取请求，这导致了 error 。

为了解决这个问题，
在 StateProvider 中存储当前用户时，只需将 user.uid 存储在 localStorage 中。

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

在发出 fetch 请求而不是使用 user.uid 时，您可以从 localStorage 获取 uid 的值，这将解决错误。

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);
        }