Axios动态ID请求出现404错误，硬编码ID正常的问题求助

核心问题 #

你遇到的404错误是因为第一次发起请求时，id的值是undefined，导致请求URL变成了https://jsonplaceholder.typicode.com/users/undefined，自然找不到对应资源。

问题出在两处：

1. 没必要把params当成Promise来await，Next.js客户端组件里的params是直接可用的对象，不需要异步等待。
2. 调用getUser的useEffect依赖是空数组，组件一挂载就执行，但这时候paramsObj还没完成更新（setparamsObj是异步操作），id仍为undefined，直接发起了无效请求。

修正后的代码 #

"use client"
import axios from "axios";
import { useEffect } from "react";

const page = ({ params }) => {
  const { id } = params;
  console.log(id);

  const getUser = async () => {
    // 先判断id是否存在，避免无效请求
    if (!id) return;
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    console.log(response.data);
  };

  useEffect(() => {
    getUser();
  }, [id]) // 依赖id，确保id存在且变化时才发起请求

  return (
    <div>page{id}</div>
  )
}

export default page

关键修改点 #

• 直接从params解构id，去掉多余的paramsObj状态和异步等待逻辑
• 给getUser的useEffect加上id作为依赖，保证请求时机正确
• 在getUser里增加id的判断，进一步避免无效请求

这样就能确保请求时id是有效的具体值，不会再出现404错误。

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