Nextjs getInitialProps query.id 未定义

Question

我试图从路由中获取 id 为 http//localhost:3000/portfolios/helloworld 所以 id 是 helloworld。但我收到一条错误消息，指出 TypeError: 无法解构 'query' 的属性 'id'，因为它未定义。

const PortfolioDetail = ({ query }) => {
  const { id } = query;
  return <h1>I am Details Page with ID: {id}</h1>;
};

PortfolioDetail.getInitialProps = ({ query }) => {
  return { query };
};

export default PortfolioDetail;

我用类组件尝试了同样的事情，但错误是一样的。

// class PortfolioDetail extends React.Component {
//   static getInitialProps({ query }) {
//     return { query };
//   }

//   render() {
//     const id = this.props.query.id;
//     return <h1>I am Detail Page with id : {id} </h1>;
//   }
// }

// export default PortfolioDetail;

这是我的项目结构，您可以在下图中看到

它只能工作，我可以使用下面显示的 useRouter 获取我的 ID。

import { useRouter } from 'next/router';
import React from 'react';

const PortfolioDetail = () => {
  const router = useRouter();
  const id = router.query.id 
  return <h1>I am Details Page with ID: {id}</h1>;
};

PortfolioDetail.getInitialProps = ({ query }) => {
  return { query };
};

export default PortfolioDetail;

我被困在这一点上，我真的很想知道为什么它不起作用。

Answer 1

我知道了，您的 _app 中有错误：

import '../styles/index.scss';
import 'bootstrap/dist/css/bootstrap.min.css';

// Don't need to spread pageProps here
const MyApp = ({ Component, ...pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

应该是：

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

Answer 2

为什么不像下面显示的代码那样使用它

  export default function FirstPost({ id }) {
    console.log("-->", id);
    return (
      <>
        {id}sdlfdfdlkj
      </>
    );
  }

  FirstPost.getInitialProps = ({ query }) => {
    return { id: query?.id };
  };