Next.js动态路由搜索结果页无法获取输入搜索词如何解决

问题根因 #

• 1. getServerSideProps参数取值错误
     Next.js的getServerSideProps入参是完整的上下文对象，动态路由参数存放在context.query属性下，你直接从上下文解构product_name无法拿到对应值，所以productName本身就是undefined，请求后端接口自然也拿不到正确结果。
• 2. getServerSideProps返回的props和组件接收参数不匹配
     你在getServerSideProps返回的props字段是products，但页面组件声明接收的参数是searchName，二者字段名完全不对应，组件自然取不到值，打印出来就是undefined。
• 3. （可选排查）动态路由文件名不符合Next.js规范
     如果你跳转的路径是/productSearchResult/xxx，那么你的pages目录下的页面文件需要符合结构：pages/productSearchResult/[product_name].js，括号里的名称就是你可以从query中取到的路由参数名，如果文件名和参数名不对应也会取不到值。
• 4. 额外的逻辑错误：你已经用了服务端渲染getServerSideProps拉取数据，不需要在组件内部再调用searchResult方法重复拉取，而且异步操作直接写在组件根级会导致每次渲染都触发请求，性能极差。另外React要求自定义组件首字母必须大写，你写的<productList />会被识别为原生HTML标签，无法正常渲染。

修复方案 #

第一步：修正动态路由文件名 #

确保你的页面文件路径为：pages/productSearchResult/[product_name].js，这样路由参数会以product_name为key存放在query中。

第二步：修正getServerSideProps的逻辑 #

export async function getServerSideProps(context) {
  // 从query中取动态路由参数
  const productName = context.query.product_name;
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_LINK}search-products/${productName}/`);
  const data = res ? await res.json() : {data: ""};

  return {
    props: {
      // 返回两个字段：搜索词、搜索结果
      searchName: productName,
      searchedProducts: data.data || ""
    }
  }
}

第三步：修正页面组件逻辑 #

import Navbar from "../../components/navbar"
import Head from "next/head"
// 组件名首字母大写
import ProductList from "../../components/productList"

export default function ProductionSearchResult({ searchName, searchedProducts }) {
  console.log(searchName); // 现在可以正常打印搜索词
  
  return (
    <div>
      <Head>
        <title>Growcery | Search Result</title>
        <meta name="description" content="Your search result | Growcery" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar/>
      <main>
        <p>Showing results for {searchName}</p>
        <ProductList products={searchedProducts} />
      </main>
    </div>
  )
}

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