Next.js搜索页本地正常，Vercel部署后searchParams.query未定义

本地localhost环境运行正常，但部署到Vercel后页面头部标题显示“Searching for: undefined”，说明searchParams.query在线上环境未定义。使用Sanity与Next.js 13开发，相关代码如下：

SearchPage组件代码 #

import { getSearchResults } from "@/sanity/utils"
import Link from "next/link"
import { SearchBar } from "@/components"

export async function generateMetadata({ searchParams }) {
  return {
    title: `Searching for: ${searchParams.query}`
  }
}

export default async function SearchPage({ searchParams }) {
  const searchResults = await getSearchResults(searchParams.query)

  return (
    <main className="mt-[70px] min-h-screen">
      <div className="bg-byzantine-blue text-white py-10 px-5">
        <div className="container mx-auto flex flex-col justify-center items-center">
          <h2 className="text-lg md:text-xl mb-3 md:mb-5">Search results for:</h2>
          <SearchBar />
          <p className="mt-2 text-text-blue text-lg">{searchResults.length} {searchResults.length === 1 ? 'article' : 'articles'}</p>
        </div>
      </div>
      <div className="max-w-screen-web mx-auto py-10 px-6 md:px-10 flex flex-col gap-6 md:gap-10">
        {searchResults.map(article => (
          <Article key={article.id} {...article} />
        ))}
      </div>
    </main>
  )
}

const Article = ({ description, id, title }) => {
  return (
    <article className="border-solid border-[1px] flex flex-col items-center border-neutral-200 px-3 py-6">
      <h5 className="text-xl font-medium text-center">{title}</h5>
      <p className="mt-3 md:text-lg text-neutral-600 text-center max-w-4xl">{description}</p>
      <Link href={`/blog/${id}`} className="md:text-lg inline-block hover:bg-blue-500 mt-4 px-3 py-2 bg-byzantine-blue text-white">View article</Link>
    </article>
  )
}

SearchBar组件代码 #

"use client"
import React, { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const search = useSearchParams().get('query')

  const [query, setQuery] = useState(search ? search : '');

  const handleSearch = () => {
    router.push(`/search?query=${query}`);
  }

  return (
    <div className='flex justify-center md:gap-4 gap-2  w-[80%] md:w-full max-w-xl mx-auto'>
      <input type="text" placeholder='Search for articles:' className='bg-transparent py-2 border-solid border-[2px] border-blue-400 px-4 md:px-6 grow placeholder:text-text-blue outline-none text-white text-lg focus:bg-white focus:text-black focus:placeholder:text-neutral-400' value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={handleSearch} className='bg-gold hover:bg-gold-hover px-4 md:px-6 text-lg text-white'>
        Search
      </button>
    </div>
  )
}

问题解决方法 #

1. 给searchParams添加兜底处理
   Vercel部署环境中，直接访问/search路径（无query参数）或参数未正确传递时，searchParams可能为undefined，需在generateMetadata和页面组件中做参数校验：

   修改generateMetadata：

   export async function generateMetadata({ searchParams }) {
     const query = searchParams?.query || 'no keywords';
     return {
       title: `Searching for: ${query}`
     }
   }
   

   修改SearchPage组件的API调用：

   export default async function SearchPage({ searchParams }) {
     // 空query时返回空结果，避免API调用报错
     const query = searchParams?.query || '';
     const searchResults = query ? await getSearchResults(query) : [];
     // 其余代码保持不变
   }
   

2. 优化SearchBar组件的参数获取与跳转逻辑
   避免重复调用useSearchParams()，同时对搜索关键词进行URL编码，防止特殊字符导致参数丢失：

   "use client"
   import React, { useState } from 'react'
   import { useRouter, useSearchParams } from 'next/navigation'
   
   export default function SearchBar() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const initialQuery = searchParams?.get('query') || '';
     const [query, setQuery] = useState(initialQuery);
   
     const handleSearch = () => {
       const trimmedQuery = query.trim();
       if (!trimmedQuery) return;
       // 对关键词进行URL编码，确保特殊字符正确传递
       router.push(`/search?query=${encodeURIComponent(trimmedQuery)}`);
     }
   
     // JSX部分保持不变
   }
   

3. 检查Vercel部署配置
   确保next.config.js中没有限制动态路由的配置，Vercel默认支持Next.js App Router的动态参数，但如果有自定义rewrites或redirects规则，需确保/search路径的参数能被正确解析。

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