Hello, I am trying to access the details of my page in Next.js and retrieve data from a Firestore database. Here is the error message I am encountering:

Firebase initialized successfully page.js:32 router.query: undefined page.js:34 Movie ID: undefined page.js:47 Error fetching movie details: FirebaseError: Function doc() cannot be called with an empty path.

Any idea why this is happening? PS: The URL is correct

http://localhost:3000/movie/Mp9MwJPtaqko3foU95CE => Mp9MwJPtaqko3foU95CE is the auto-generated ID in the database

"use client";

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { getFirestore, collection, doc } from "firebase/firestore";
import { initializeApp } from "firebase/app";

import firebaseConfig from "../../firebaseConfig";

const MovieDetail = () => {
  const router = useRouter();
  const [movieDetails, setMovieDetails] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      try {
        initializeApp(firebaseConfig);
        console.log("Firebase initialized successfully");
      } catch (error) {
        if (!/already exists/.test(error.message)) {
          console.error("Firebase initialization error", error.stack);
        }
      }

      const fetchMovieDetails = async () => {
        setIsLoading(true);
        setError(null);

        const { id } = router.query || {};
        console.log("router.query:", router.query);

        console.log("Movie ID:", id);
        const db = getFirestore();

        try {
          const docSnap = await doc(collection(db, "movies"), id).get();
          console.log("docSnap:", docSnap);

          if (docSnap.exists) {
            setMovieDetails(docSnap.data());
          } else {
            setError("Movie not found");
          }
        } catch (error) {
          console.error("Error fetching movie details:", error);
          setError("Failed to fetch movie details: " + error.message);
        } finally {
          setIsLoading(false);
        }
      };

      fetchMovieDetails();
    }
  }, [router.query]);

  return (
    <div>
      {isLoading ? (
        <p>Loading movie details...</p>
      ) : error ? (
        <p>{error}</p>
      ) : movieDetails ? (
        <>
          <h1>{movieDetails.title}</h1>
        </>
      ) : (
        <p>No movie details available</p>
      )}
    </div>
  );
};

export default MovieDetail;

Here is the firebase.js file

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import firebaseConfig from "./firebaseConfig";

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

By the way, the code for the grid displaying "movies" is functioning properly and retrieving the IDs without any issues

"use client";

import React, { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from "firebase/firestore";
import Image from "next/image";
import Link from "next/link";
import firebaseConfig from "../firebaseConfig";
import Search from "@/components/Search/Search";
import "./s.css";

const Page = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    if (typeof window !== "undefined") {
      try {
        initializeApp(firebaseConfig);
        console.log("Firebase initialized successfully");
      } catch (error) {
        if (!/already exists/.test(error.message)) {
          console.error("Firebase initialization error", error.stack);
        }
      }

      const fetchData = async () => {
        try {
          console.log("Fetching data...");
          const db = getFirestore();
          const moviesCollection = await getDocs(collection(db, "movies"));

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

          setMovies(moviesData);
          console.log("Data fetched successfully:", moviesData);
        } catch (error) {
          console.error("Error fetching data:", error);
        }
      };

      fetchData();
    }
  }, []);

  return (
    <div>
      <Search />
      <main>
        <div className="hero-container">
          {movies.map((movie) => (
            <div key={movie.id} className="main-container">
              <div className="poster-container">
                <Link href={`/movie/${movie.id}`} passHref>
                  <Image
                    src={movie.posterUrl}
                    className="poster"
                    width={230}
                    height={350}
                    alt={movie.title}
                  />
                  <p>
                    {movie.title} ({movie.year})
                  </p>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
};

export default Page;