Next js firebase（firestore数据库）自动生成的id错误

Question

嗨，谁能告诉我，当我想在下一个 js 中获取页面的详细信息并且我从 firestore 数据库获取数据时，这对我来说是这样的

Firebase 初始化成功 page.js:32 router.query: 未定义 page.js:34 电影 ID: 未定义 page.js:47 获取电影详细信息时出错：FirebaseError: 无法使用空路径调用函数 doc()。

知道为什么吗？ PS：网址正确

http://localhost:3000/movie/Mp9MwJPtaqko3foU95CE => Mp9MwJPtaqko3foU95CE 是数据库中自动生成的 id

"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;

这是 firebase.js

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;

顺便说一句，这段具有“电影”网格的代码正在工作，并且它获取了 id，并且一切都工作正常

"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;

Answer 1

代码中对

doc()

的唯一调用是：

const docSnap = await doc(collection(db, "movies"), id).get();

因此，如果这就是错误的来源，那么

id

似乎没有值。

验证的方法是在调试器中，或者在使用之前

console.log(id)

上线：

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