How can I retrieve all user IDs and combine their ratings in Firestore?

I'm trying to combine ratings from all registered users in Firestore, but while fetching ratings for the current user works, querying for user IDs returns "No users found."

I have some existing approaches that have similar issues, as seen in these posts:

Firestore query returns no documents even though they are shown in the console in italics
(2 answers)

Firestore DB - documents shown in italics
(4 answers)

Get all the documents from a collection firebase angular/typescript [closed]
(1 answer)

Closed last month.

Below is my code:

JAVASCRIPTCopied
import React, { useEffect, useState } from "react";
import { db } from "./firebase/Firebase";
import { collection, getDocs } from "firebase/firestore";
import { useAuth } from "./AuthContext";

const Ratings = () => {
  const { currentUser } = useAuth(); // Get the currently logged-in user
  const [userRatings, setUserRatings] = useState([]);
  const [userUIDs, setUserUIDs] = useState([]); // State for all user UIDs
  const [loadingRatings, setLoadingRatings] = useState(true); // Loading state for user ratings
  const [loadingUIDs, setLoadingUIDs] = useState(true); // Loading state for user UIDs

  useEffect(() => {
    const fetchUserRatings = async () => {
      if (!currentUser) {
        console.error("No user is logged in.");
        setLoadingRatings(false);
        return;
      }

      try {
        console.log("Fetching ratings for the logged-in user...");
        const userRatingsCollection = collection(
          db,
          "users",
          currentUser.uid,
          "ratings"
        );
        const ratingsSnapshot = await getDocs(userRatingsCollection);

        const ratings = ratingsSnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));

        console.log("Fetched User Ratings:", ratings);
        setUserRatings(ratings);
      } catch (error) {
        console.error("Error fetching user ratings:", error);
      } finally {
        setLoadingRatings(false);
      }
    };

    const fetchAllUserUIDs = async () => {
      try {
        console.log("Fetching all user UIDs...");
        const usersCollection = collection(db, "users"); // Accessing the users collection
        const usersSnapshot = await getDocs(usersCollection); // Fetching all documents

        const uids = usersSnapshot.docs.map((doc) => doc.id); // Extracting the document IDs (user IDs)
        console.log("Fetched User UIDs:", uids);
        setUserUIDs(uids);
      } catch (error) {
        console.error("Error fetching user UIDs:", error);
      } finally {
        setLoadingUIDs(false);
      }
    };

    fetchUserRatings();
    fetchAllUserUIDs();
  }, [currentUser]);

  return (
    <div className="container mx-auto p-4">
      <h2 className="text-2xl font-bold mb-4">Your Ratings</h2>
      {loadingRatings ? (
        <p>Loading your ratings...</p>
      ) : userRatings.length > 0 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {userRatings.map((rating) => (
            <div
              key={rating.id}
              className="border rounded-lg p-4 shadow hover:shadow-lg transition"
            >
              <h3 className="text-lg font-semibold">{rating.itemTitle}</h3>
              <p className="text-gray-700">Rating: {rating.rating}</p>
            </div>
          ))}
        </div>
      ) : (
        <p>No ratings found for your account.</p>
      )}

      <h2 className="text-2xl font-bold mt-8">All User UIDs</h2>
      {loadingUIDs ? (
        <p>Loading user UIDs...</p>
      ) : userUIDs.length > 0 ? (
        <ul className="list-disc pl-6">
          {userUIDs.map((uid) => (
            <li key={uid} className="text-gray-700">
              {uid}
            </li>
          ))}
        </ul>
      ) : (
        <p>No users found.</p>
      )}
    </div>
  );
};

export default Ratings;

The code successfully shows ratings for the logged-in user, but the query to get all user UIDs from the /users collection returns no results. My Firestore document paths look like this:

/users/mu2CXMasv4eBb4qxLYhs8mnKPty2/ratings/1

and the console display of the database shows ratings in italics, which suggests that there are subcollections under user IDs but no parent documents in the /users collection.

I tried aggregating and averaging ratings across multiple users by querying /users/{userId}/ratings subcollections, but it didn't work. Should I create a parent document for each user or use a collection group query on the "ratings" subcollections? Any insights or suggestions would be appreciated.