开发者问题收集

next js 动态路由错误未处理的运行时错误

2024-05-28
24

在此处输入图片说明

问题详情 我在使用带有 TypeScript 的 Next.js 应用程序时遇到错误。具体来说,我创建了一个 AboutPage 组件,它采用一个名为 para 的 prop,其中包含一个 aboutId 字符串。当我尝试呈现此组件时,我收到以下运行时错误:

在此处输入图片说明

1个回答

检查 para 是否已定义。使用:

const AboutPage = ({ para }: { para: { aboutId: string } }) => {
  if (!para) return <h1>Loading...</h1>;
  return <h1>About details: {para.aboutId}</h1>;
};
export default AboutPage;

getServerSideProps 中获取数据:

import { GetServerSideProps } from 'next';

const AboutPage = ({ para }: { para: { aboutId: string } }) => {
  if (!para) return <h1>Loading...</h1>;
  return <h1>About details: {para.aboutId}</h1>;
};

export default AboutPage;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { aboutId } = context.params;
  const para = { aboutId };
  return { props: { para } };
};

修复错误。需要 para

Anastasios3
2024-05-28