Firebase .length broken on infinate scroll

my NextJs site keeps throwing error due to firebase infinate scroll. .length being undefinded for some unknown reaseon. please help debug the code if possible. Its been a mess trying to get this dmn stuff to work in nextjs.

useEffect(() => {
    
    // This useEffect is used to get the todos for the user
    try {
      if (!firestore) return;
      // Only execute the query if we have an user
      const querySubmissions = query(
            collection(firestore, "roadmap"),
            where("csite", "==", router.query.csite),
            where("uid", "==", router.query.uid),
            orderBy("createdAt", "desc"),
            limit(10)
          );
      if (!querySubmissions) return;
      const unsubscribe = onSnapshot(querySubmissions, (querySnapshot) => {
        setSubmissions(querySnapshot.docs);
      });
      return () => unsubscribe();
    } catch (error) {
      console.log(error);
    }
  }, [router]);


// -------------------- unessesary code removed between -------------------------------------


  useEffect(() => {

  window.onscroll = () => {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  console.log('bottom');
    setIsLoadingData(true);
    const lastDocument = submissions.data().length - 1;
    const documents = query(
      collection(firestore, "roadmap"),
      where("csite", "==", router.query.csite),
      where("uid", "==", router.query.uid),
      orderBy("createdAt", "desc"),
      limit(10),
      startAfter(lastDocument)
    );
    const unsubscribe = onSnapshot(documents, (querySnapshot) => {
      setSubmissions(submissions => submissions.concat(querySnapshot.docs));
      setIsLoadingData(false);
    });
    return () => unsubscribe();
  }
  };
  }, [router]);

Please help.

I was expecting infinate scroll when creating this code in VSCode.