Next.js项目Search页打印props的searchResult触发500内部错误求助

问题根因 #

• 核心错误：服务端数据获取函数名拼写错误
  Next.js 规定的服务端渲染数据获取函数名为getServerSideProps，你在search.js中误写为getServerSiderProps，多了字母r，将Side拼成了Sider，导致Next.js无法识别该函数，服务端渲染逻辑执行失败抛出500错误。
• 次要错误：路由参数未做非空校验直接使用
  Next.js的useRouter返回的query对象在页面首次渲染（尤其是服务端渲染阶段）可能还未完成解析，startDate、endDate等参数可能为undefined，直接传入new Date()会生成无效日期，触发报错进一步导致渲染失败。

解决步骤 #

1. 修正search.js中服务端渲染函数的拼写
2. 给路由参数添加默认值，避免undefined传入日期格式化逻辑

修正后的核心代码 #

// search.js 修正函数拼写
export async function getServerSideProps() {
  const searchResult = await fetch("https://links.papareact.com/isz").then(
    (res) => res.json()
  );
  return {
    props: {
      searchResult,
    },
  };
}

const Search = ({ searchResult }) => {
  const router = useRouter();
  console.log(searchResult);

  // 给所有路由参数添加默认值，防止undefined报错
  const { 
    location = "", 
    startDate = new Date().toISOString(), 
    endDate = new Date().toISOString(), 
    noOfGuests = 1 
  } = router.query;

  const formattedStartDate = format(new Date(startDate), "dd MMMM yyyy");
  const formattedEndDate = format(new Date(endDate), "dd MMMM yyyy");
  const range = `${formattedStartDate} - ${formattedEndDate}`;

  // 剩余组件代码保持原有逻辑不变即可
}

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