Next.js+TypeScript传数组报错：string[]无法赋值给query类型

报错原因 #

Next.js 的 <Link> 组件中，query 参数要求为 ParsedUrlQueryInput 类型（即键值对结构），直接传递字符串数组不符合类型定义，因此 TypeScript 抛出类型不匹配错误。

可行方案 #

1. 将数组转为字符串传递（推荐） #

这种方式适配 URL 传参逻辑，页面刷新后数据不会丢失，适合非敏感数据传递：

• 传递端代码：

  <Link href={{ 
    pathname: "/model", 
    query: { data: JSON.stringify(data) } 
  }}>
    跳转至模型页
  </Link>
  

• 接收端代码：

  import { useRouter } from 'next/router';
  
  export default function ModelPage() {
    const router = useRouter();
    // 处理可能的空值或解析错误
    const data = router.query.data 
      ? JSON.parse(router.query.data as string) 
      : [];
  
    return <div>{/* 使用 data */}</div>;
  }
  

2. 使用 URL 多参数格式传递 #

如果数组元素都是简单字符串，可以直接将数组作为 query 的一个字段，Next.js 会自动生成 ?items=item1&items=item2 格式的 URL：

• 传递端代码：

  <Link href={{ 
    pathname: "/model", 
    query: { items: data } 
  }}>
    跳转至模型页
  </Link>
  

• 接收端代码：

  import { useRouter } from 'next/router';
  
  export default function ModelPage() {
    const router = useRouter();
    // 处理单个值/多个值的类型差异
    const items = Array.isArray(router.query.items) 
      ? router.query.items 
      : (router.query.items ? [router.query.items] : []);
  
    return <div>{/* 使用 items */}</div>;
  }
  

3. 不推荐使用 useContext 的原因 #

useContext 是用于全局跨组件共享状态的方案，而你的需求只是页面跳转时一次性传递数据，使用它会造成过度设计：

• 上下文需要在 _app.tsx 中全局包裹，增加不必要的复杂度
• 页面刷新后，上下文存储的数据会丢失（仅存在内存中）

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