Firestore doc().get() never resolves in ReactJS for iOS

I'm combining ReactJS with Firestore from Google. I'm trying to fetch some URLs in useEffect().
Here is my code:

function FriendSchedule(){
    useEffect(() => {
        alert("useEffect")
        var calendarFetch = fetch(someUrl)
        var firestoreFetch = getClassesFromFirestore()

        Promise.all([calendarFetch, firestoreFetch]).then(response => {
            alert("Promise.all resolved")
            response[0].json().then(data => {
                allClasses = data;
                updateClass();
            })
        });
    }, [])

    function getClassesFromFirestore(){
        alert("getting class from firestore")

        var getID = viewID;

        var docRef = firestore.db.collection("users").doc(getID).get();
        docRef.then(()=>{alert("Got user data")})

        var announcementRef = firestore.db.collection("announcement").doc("info").get();
        announcementRef.then(()=>{alert("Got announcement data")})

        return Promise.all([docRef, announcementRef]).then((values) => {
            alert("successfully got class from firestore")
            var data = values[0].data();
      
            // other code
        }).catch((error) => {
            alert("Permission denied. Maybe this user haven't added you as a friend yet.");
            console.log(error)
        })
    }
}

export default FriendSchedule;

When I run this code, the alerts came in this order:

1. useEffect
2. getting class from firestore

And then the next alert never came, neither did the "permission denied" alert came. docRef and announcementRef seems to stay as an unfulfilled Promise forever (the only possible explanation I can think of).

Here is how I encountered this bug.
When users first land on my website, they visit the main page MySchedule. MySchedule has almost identical code as FriendSchedule, both fetching the data in the same order with useEffect. MySchedule loads perfectly fine and user can click to FriendSchedule. Once FriendSchedule page begins to load, the problem described above happens. It's stuck at getting document from Firestore.

I clicked Go Back button on browser until I'm at MySchedule, then Go Forward button until it brings me back to FriendSchedule page where the user was stuck at. The data now somehow comes through and the rest of the alerts all showed up.

After the data all loaded on FriendSchedule, if I navigate back to MySchedule, the same thing would happen. Now MySchedule is stuck loading, and I have to click Go Back button on browser to FriendSchedule, and forward button to MySchedule to get it to load. Then FriendSchedule is stuck loading again...

I'm very confused by this bug.

Here's some additional information that might be helpful:

1. I have Firestore offline persistence enabled
2. I also have a service worker running
3. This problem only happens on iOS with Safari and Chrome (didn't try other browsers). Windows and Android with whatever browser both have no problem.

Any help is appreciated!