Firebase – useSelector retrieving state on initial page load, but returning nothing on page refresh

I’m building a simple venue review app using react/redux toolkit/firebase.

The feature VenueList.js renders a list of venues. When the user clicks on a venue, it routes them to Venue.js page which renders information about the specific venue clicked on.

Here’s the problem: Venue.js renders on the first page load, but crashes when I try to refresh the page.

After some investigating I found that in Venues.js, the useSelector hook returned the correct state on first load, and then an empty array upon refresh:

Intial page load:

On page refresh

Why is this happeing and how can I fix this so that the page renders in all circumstances?

Here’s Venue.js

import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import AddReview from "../../components/AddReview";
import Reviews from "../../components/Reviews";

const Venue = () => {
  const { id } = useParams();

  
  const venues = useSelector((state) => state.venues);

  const venue = venues.venues.filter((item) => item.id === id);

  console.log(venues)

  const content = venue.map((item) => (
    <div className="venue-page-main" key = {item.name}>
      <h2>{item.name}</h2>
      <img src={item.photo} alt = "venue"/>
    </div>
  ));

  return (
    <>
        {content}
        <AddReview id = {id}/>
        {/* <Reviews venue = {venue}/> */}
    </>
  );
};
 
export default Venue;

The list of venues in VenueList.js

import { Link } from "react-router-dom";
import { useEffect } from "react";
import { fetchVenues } from "./venueSlice";
import { useSelector,useDispatch } from "react-redux";


const VenueList = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchVenues());
  }, [dispatch]);

  const venues = useSelector((state) => state.venues);

  const content = venues.venues.map((venue) => (
    <Link to={`/venue/${venue.id}`} style = {{textDecoration: "none"}} key = {venue.name}>
      <div className="venue-item">
        <h2>{venue.name}</h2>
        <img src={venue.photo} />
      </div>
    </Link>
  ));

  return (
    <div className="venue-list">
      {content}
    </div>
  );
};

export default VenueList;

And here’s the slice venueSlice.js controlling all the API calls

import { createSlice,createAsyncThunk } from "@reduxjs/toolkit";
import { collection,query,getDocs,doc,updateDoc,arrayUnion, arrayRemove, FieldValue } from "firebase/firestore";
import { db } from "../../firebaseConfig";

const initialState = {
    venues: []
}

export const fetchVenues = createAsyncThunk("venues/fetchVenues", async () => {
    try {
      const venueArray = [];
      const q = query(collection(db, "venues"));
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) =>
        venueArray.push({ id: doc.id, ...doc.data() })
      );
      return venueArray;
    } catch (err) {
      console.log("Error: ", err);
    }
  });

  export const postReview = createAsyncThunk("venues/postReview", async (review) => {
      try {
        const venueRef = doc(db,"venues",review.id)
        await updateDoc(venueRef, {
          reviews: arrayUnion({ 
            title:review.title,
            blurb:review.blurb, 
            reviewId:review.reviewId })
        })
      } catch (err) {
        console.log('Error :', err)
      }
  })

export const deleteReview = createAsyncThunk("venues/deleteReview", async (review) => {

  const newReview = {blurb:review.blurb, title: review.title, reviewId: review.reviewId}

  try {
    const venueRef = doc(db,"venues",review.id)
    await updateDoc(venueRef, {
      reviews: arrayRemove(newReview)
    })
  } catch (err) {
    console.log('Error: ', err)
  }
})




const venueSlice = createSlice({
  name: "venues",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(fetchVenues.fulfilled, (state, action) => {
      state.venues = action.payload;
    })
  },
});

export default venueSlice.reducer