Next.js路由传递对象报错，咨询useSearchParams()使用方式

1. 修正跳转传参逻辑 #

你当前直接把对象展开到query里会报错，因为URL查询参数仅支持字符串类型。需要将整行数据序列化为JSON字符串后再传递：

const handleEdit = (rowId) => {
  const rowData = dataTable[rowId];
  router.push({
    pathname: `Create/${rowData.id}/edit`,
    query: {
      rowData: encodeURIComponent(JSON.stringify(rowData))
    }
  });
};

这里用JSON.stringify将对象转为字符串，再通过encodeURIComponent处理特殊字符，避免URL解析异常。

2. 在编辑页面用useSearchParams解析数据 #

在Create/[id]/edit的客户端组件中，通过useSearchParams获取查询参数，再将JSON字符串解析回对象：

"use client";

import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

const EditPage = () => {
  const searchParams = useSearchParams();
  const [rowData, setRowData] = useState(null);

  useEffect(() => {
    const rowDataStr = searchParams.get('rowData');
    if (rowDataStr) {
      try {
        const parsedData = JSON.parse(decodeURIComponent(rowDataStr));
        setRowData(parsedData);
      } catch (err) {
        console.error('解析数据出错:', err);
      }
    }
  }, [searchParams]);

  if (!rowData) {
    return <div>加载中...</div>;
  }

  // 基于rowData渲染编辑表单
  return (
    <div>
      <h1>编辑 {rowData.name}</h1>
      {/* 表单内容 */}
    </div>
  );
};

export default EditPage;

3. 额外注意事项 #

• 若数据量较大，不建议用URL传参（URL存在长度限制），此时更合理的方式是仅传递id，在编辑页面通过id从数据库/接口拉取完整数据，安全性和可靠性更高。
• 确保传递的对象可以被JSON.stringify序列化，不能包含函数、Symbol等无法序列化的类型。

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