Next.js：无法读取未定义的属性（读取“indexOf”）

Question

下面的代码最初可以工作，但是一旦我重新加载页面，我就会得到TypeError: Cannot read properties of undefined (reading 'indexOf') 。

  const [folders, setFolders] = useState([]);

  const [user] = useAuthState(auth);

  const folderColRef = collection(db, "UsersData", user?.uid, "Folders");
  useEffect(() => {
    const getFolders = async () => {
      const userData = await getDocs(folderColRef);
      setFolders(userData.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    getFolders();
  }, []);

Answer 1

这通常意味着您将undefined传递给collection函数，这是不允许的。 在您的代码中，这意味着user是null ，这实际上是页面首次加载时的正常行为（因为恢复用户的身份验证 state 需要异步调用服务器）。

我的猜测是，您需要使效果取决于用户变量，然后在其中处理null / undefined ：

const [user] = useAuthState(auth);

useEffect(() => {
  if (!user) return; // 👈 Add this line
  const folderColRef = collection(db, "UsersData", user!.uid, "Folders");  // 👈 Move this line
  const getFolders = async () => {
    const userData = await getDocs(folderColRef);
    setFolders(userData.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };
  getFolders();
}, [user]);  // 👈 Add a dependency here