Next.js动态路由返回404错误，请求技术排查帮助

问题描述 #

在Next.js中使用动态路由时，已配置getStaticPaths和getStaticProps，点击跳转后浏览器URL正确（如http://localhost:3000/Properties/5f328e9c-656f-4691-8b4b-4f414bbfdee2），但页面显示404未找到。Firebase数据获取逻辑在其他页面可正常工作，网络请求路径与数据库一致。

代码问题分析 #

你的动态页面代码存在几个关键错误，导致getStaticPaths无法生成正确的预渲染路径，进而触发404：

• 异步处理不当：getStaticPaths和getStaticProps中用.then()处理异步请求，但未等待操作完成，后续逻辑执行时数组仍为空
• 数组push语法错误：用push[]代替了正确的push()方法调用，无法将数据添加到数组
• 数据处理冗余：获取单个属性时使用Object.values(prop)多余，Firebase的val()直接返回单个属性对象，无需转数组

修复后的代码 #

import { get, ref } from "firebase/database";
import React from "react";
import BookingMenu from "../../components/BookingMenu";
import { database } from "../../components/firebase";
import PropertyStyles from "../../styles/ViewProperty.module.css";

const ViewProperty = ({ property }) => {
  return (
    <>
      <div style={{ display: "flex" }}>
        <div className={PropertyStyles.album}>{property?.Id}</div>
        <BookingMenu />
      </div>
    </>
  );
};

export default ViewProperty;

export const getStaticPaths = async () => {
  const propertyRef = ref(database, "properties");
  const snapshot = await get(propertyRef);
  const properties = snapshot.val() || {};
  const allProperties = Object.values(properties);

  const paths = allProperties.map((property) => ({
    params: { Id: property.Id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.Id;
  const propertyRef = ref(database, `properties/${id}`);
  const snapshot = await get(propertyRef);
  const property = snapshot.val();

  return {
    props: { property },
  };
};

额外检查点 #

• 确认动态页面文件路径为pages/Properties/[Id].js（对应URL路径/Properties/xxx），若文件名是[id].js（小写），需将params中的键名改为id保持一致
• 若Firebase数据中Id字段本身是字符串类型，可去掉toString()直接使用

内容的提问来源于stack exchange，提问作者lams