Next.js重置密码流程中首次请求token为何显示undefined？

问题原因 #

Next.js 的useRouter返回的query对象，在页面初始渲染阶段可能还没完成URL参数的解析，导致直接在组件顶层获取query.token会拿到undefined——哪怕URL里确实存在这个参数。

另外你代码里还有个小细节：setDatas(response.data)是异步操作，所以then里立刻console.log(Datas)打印的还是更新前的旧值，不是刚请求到的新数据。

修正后的代码 #

import { useEffect } from 'react';
const { push, query } = useRouter();
const [Datas, setDatas] = useState([]);

// 用useEffect包裹请求，确保query解析完成后再执行
useEffect(() => {
  const token = query.token;
  // 先判断token存在再发起请求，避免无效请求报错
  if (!token) return;

  axios
    .get(`${variables.API_URL}Auth/reset-password/${token}`)
    .then(function (response) {
      setDatas(response.data);
      // 要打印最新请求数据直接用response.data即可
      console.log("最新请求数据:", response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
}, [query.token]); // 依赖query.token，token变化时自动重新发起请求

// 监听Datas状态变化，打印最新值
useEffect(() => {
  console.log("Data:", Datas);
}, [Datas]);

额外建议（Next.js 13+ App Router场景） #

如果是用App Router的项目，更推荐用useSearchParams来获取URL参数，它的参数解析时机更稳定：

import { useSearchParams } from 'next/navigation';

// 在组件内使用
const searchParams = useSearchParams();
const token = searchParams.get('token');

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