Next.js传递footprintsData对象至页面时显示undefined的问题

问题根源 #

你遇到的核心问题有两个：

1. 直接传对象到query参数会被转义为无效字符串：URL查询参数仅支持字符串类型，直接把footprintsData对象塞进router.push的query里，最终会被转换成[object Object]，结果页面自然拿不到有效数据。
2. router.query初始化阶段可能为undefined：Next.js中router.query是异步加载的，组件刚初始化时它还未就绪，直接解构会触发Cannot destructure...错误。

正确的传递与接收方式 #

方法一：将对象序列化为JSON字符串传递（推荐，适配复杂对象）

发送页面代码：

import { useRouter } from 'next/router'; // Pages Router 用这个
// App Router 则导入：import { useRouter } from 'next/navigation';

const footprintsData = {
  carFootprint: roundedCarFootprint,
  electricityFootprint: roundedElectricityFootprint,
  gasFootprint: roundedGasFootprint,
  commuteFootprint: roundedCommuteFootprint,
  airTravelFootprint: roundedAirTravelFootprint,
  totalFootprint: parseFloat(totalFootprint.toFixed(2)),
};

const router = useRouter();
// 将对象序列化为JSON字符串，确保能通过URL传递
const serializedData = JSON.stringify(footprintsData);

router.push({
  pathname: "/results",
  query: { footprintsData: serializedData },
});

结果页面代码：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function ResultsPage() {
  const router = useRouter();
  const [footprints, setFootprints] = useState(null);

  useEffect(() => {
    // 等待router.query就绪后再解析数据
    if (router.query.footprintsData) {
      try {
        const parsedData = JSON.parse(router.query.footprintsData);
        setFootprints(parsedData);
      } catch (err) {
        console.error('解析数据失败:', err);
      }
    }
  }, [router.query]);

  // 数据未加载时显示加载状态
  if (!footprints) return <div>加载中...</div>;

  // 解构使用数据
  const { totalFootprint, carFootprint, electricityFootprint, gasFootprint, commuteFootprint, airTravelFootprint } = footprints;

  return (
    <div>
      <p>总碳足迹：{totalFootprint}</p>
      {/* 其他字段按需展示 */}
    </div>
  );
}

方法二：拆分对象为独立query参数（适合数据量小的场景）

如果你的数据字段不多，也可以直接把每个字段单独作为query参数传递：
发送页面代码：

router.push({
  pathname: "/results",
  query: footprintsData, // 直接展开对象的每个字段作为独立query参数
});

结果页面代码：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function ResultsPage() {
  const router = useRouter();
  const [data, setData] = useState(null);

  useEffect(() => {
    // 等待所有query参数加载完成
    if (router.query.totalFootprint) {
      // 注意：query参数默认是字符串，需要转成数字类型
      const parsedData = {
        totalFootprint: parseFloat(router.query.totalFootprint),
        carFootprint: parseFloat(router.query.carFootprint),
        electricityFootprint: parseFloat(router.query.electricityFootprint),
        gasFootprint: parseFloat(router.query.gasFootprint),
        commuteFootprint: parseFloat(router.query.commuteFootprint),
        airTravelFootprint: parseFloat(router.query.airTravelFootprint),
      };
      setData(parsedData);
    }
  }, [router.query]);

  if (!data) return <div>加载中...</div>;

  // 使用data中的字段
  return <div>总碳足迹：{data.totalFootprint}</div>;
}

额外注意事项 #

1. App Router适配：如果你用的是Next.js 13+推荐的App Router，useRouter来自next/navigation，没有isReady属性，可改用useSearchParams获取参数：

import { useSearchParams } from 'next/navigation';

export default function ResultsPage() {
  const searchParams = useSearchParams();
  const serializedData = searchParams.get('footprintsData');
  
  let footprints = null;
  if (serializedData) {
    footprints = JSON.parse(serializedData);
  }

  if (!footprints) return <div>加载中...</div>;

  return <div>总碳足迹：{footprints.totalFootprint}</div>;
}

2. 数据大小限制：URL长度有上限（一般不超2000字符），如果footprintsData体积较大，建议改用本地存储（localStorage/sessionStorage）或服务器端会话来传递数据。

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