Next.js传递接口数据为Props时query解构报错求助

以下是针对Next.js中Link传参后Update组件无法获取query参数的具体排查方向：

1. 核对Read组件的Link传参逻辑 #

根据你使用的Next.js路由版本，确认Link的传参方式是否正确：

• Pages Router（pages目录）：需通过query对象传递参数

  import Link from 'next/link';
  
  // Read组件中的Link示例
  <Link href={{ pathname: '/update', query: { id: 你的数据ID } }}>
    跳转到更新页
  </Link>
  

• App Router（app目录）：需通过动态路由路径传参

  import Link from 'next/link';
  
  // Read组件中的Link示例
  <Link href={`/update/${你的数据ID}`}>
    跳转到更新页
  </Link>
  

2. 确认Update组件的路由API使用正确 #

不同路由系统的参数获取方式完全不同，不要混用：

• Pages Router：从next/router导入useRouter，注意路由解析是异步的，初始渲染时query可能为undefined

  import { useRouter } from 'next/router';
  import { useEffect } from 'react';
  
  export default function Update() {
    const router = useRouter();
    const { id } = router.query;
  
    // 用useEffect监听参数变化，避免初始值undefined的问题
    useEffect(() => {
      if (id) {
        // 执行你的业务逻辑
      }
    }, [id]);
  
    return <div>当前ID：{id || '加载中'}</div>;
  }
  

• App Router：从next/navigation导入useParams（动态路由参数）或useRouter，不能用next/router的API

  import { useParams } from 'next/navigation';
  
  export default function Update() {
    const params = useParams();
    // params.id对应app/update/[id]/page.js中的[id]动态路由
    const id = params.id;
  
    return <div>当前ID：{id}</div>;
  }
  

3. 检查动态路由文件结构是否匹配 #

• Pages Router：如果用路径参数（如/update/123），需在pages目录下创建update/[id].js文件；如果用query传参（如/update?id=123），只需pages/update.js即可。
• App Router：必须在app目录下创建update/[id]/page.js文件夹结构，否则动态路由参数无法被解析。

4. 避免在静态生成阶段过早访问参数 #

如果Update组件使用静态生成（getStaticProps），不要在组件初始渲染时直接依赖router.query，建议通过getServerSideProps或getStaticProps在服务端获取参数并传入组件：

// Pages Router 示例
export async function getServerSideProps(context) {
  const { id } = context.query;
  // 这里可以根据id获取数据
  return { props: { id } };
}

export default function Update({ id }) {
  // 直接使用props中的id，无需从router.query获取
  return <div>当前ID：{id}</div>;
}

5. 确认Link组件的导入来源 #

确保Link是从next/link官方库导入，避免使用第三方路由库的Link组件导致传参失效：

import Link from 'next/link'; // 正确导入方式

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