Next.js异步Page组件解构searchParams出现undefined报错的解决方法

问题原因 #

在App Router中，标记了"use client"的客户端组件，如果把Page函数改成async，React会将其识别为异步组件，此时Next.js不会为这类异步客户端Page组件传递searchParams等路由props，所以解构时会拿到undefined，触发报错。

解决方案 #

根据你的场景选择合适的方案：

方案1：客户端组件内用useEffect+状态管理获取数据 #

保留"use client"，不要把Page改成async，通过useEffect在组件挂载或参数变化时触发异步请求：

"use client"

import { useEffect, useState } from 'react';

// 假设SearchParams已定义
type SearchParams = { data?: string };

export default function Page({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const selectedMatch = searchParams.data || "[]";
  const [data, setData] = useState<unknown>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        // 替换成你的请求地址
        const res = await fetch(`/api/get-data?match=${selectedMatch}`);
        if (!res.ok) throw new Error('请求失败');
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err : new Error('未知错误'));
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [selectedMatch]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error.message}</div>;

  return (
    <div>
      {/* 渲染你的数据 */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

方案2：改为服务端组件直接async获取数据 #

如果组件不需要客户端交互（比如不用useState、useEffect等客户端钩子），可以去掉"use client"改为服务端组件，此时async Page能正常接收searchParams并直接await fetch：

// 去掉"use client"，默认是服务端组件
type SearchParams = { data?: string };

export default async function Page({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const selectedMatch = searchParams.data || "[]";
  
  // 服务端请求数据，可配置缓存策略
  const res = await fetch(`https://your-api-url.com/data?match=${selectedMatch}`, {
    next: { revalidate: 60 }, // 60秒重新验证一次
    cache: 'force-cache', // 默认缓存策略，可按需调整
  });

  if (!res.ok) throw new Error('获取数据失败');
  const data = await res.json();

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

方案3：用SWR/React Query简化客户端数据获取 #

如果需要更优雅的客户端数据管理（自动缓存、重新请求、错误处理等），可以使用SWR或React Query这类库，以SWR为例：

"use client"

import useSWR from 'swr';

type SearchParams = { data?: string };

// 封装请求函数
const fetcher = async (url: string) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

export default function Page({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const selectedMatch = searchParams.data || "[]";
  const { data, error, isLoading } = useSWR(
    `/api/get-data?match=${selectedMatch}`,
    fetcher
  );

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error.message}</div>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

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