Next.js 12.4传递查询字符串为组件Props时的类型错误

1. 修复searchParams的类型与运行时安全问题 #

在Next.js App Router中，searchParams本身是可选值（可能为undefined），且查询参数也可能不存在，必须调整类型并添加空值保护：

interface Props {
  searchParams?: { sortOrder?: string };
}

const UsersPage = ({ searchParams }: Props) => {
  // 给sortOrder设置默认值，避免undefined引发报错
  const sortOrder = searchParams?.sortOrder ?? 'asc';
  return (
    <UsersTable sortOrder={sortOrder} />
  );
};

2. 给UsersTable组件定义正确的Props类型 #

类型错误的核心原因是UsersTable未声明接受sortOrder这个props，需要为它补充类型定义：

// UsersTable组件文件
interface UsersTableProps {
  sortOrder: string;
}

const UsersTable = ({ sortOrder }: UsersTableProps) => {
  // 这里编写根据sortOrder排序列表的逻辑
  return <div>当前排序方式：{sortOrder}</div>;
};

export default UsersTable;

3. 额外注意事项 #

• 若使用Pages Router，需通过useRouter()获取查询参数，同样要处理空值：

  import { useRouter } from 'next/router';
  
  const UsersPage = () => {
    const router = useRouter();
    const sortOrder = (router.query.sortOrder as string) ?? 'asc';
    return <UsersTable sortOrder={sortOrder} />;
  };
  

• 始终对查询参数做空值处理，避免用户直接访问不带参数的页面时触发运行时错误。

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