React中useParams()获取路由参数值为undefined的问题

• 最核心问题是路由动态参数名与解构字段名不匹配：路由规则中定义的动态参数为id（配置为path='/posts/:id'），但BlogSingle组件里从useParams()解构的字段是postId。useParams()返回的对象键名和路由path中定义的参数名严格对应，不存在postId字段时解构结果自然为undefined。
• 存在组件名拼写风险：路由配置中挂载的组件写的是<PostSingle />，但你实际编写的单篇文章组件名为BlogSingle，如果该笔误真实存在，路由根本不会渲染你写的带参数读取逻辑的组件，也会导致参数读取失败。
• 附带逻辑bug：拉取单篇内容的useEffect依赖数组为空，后续如果在单篇文章页直接跳转其他文章，路由参数变化时不会重新触发接口请求，会出现内容不更新的问题。

1. 修正路由配置
   打开App.js，确认导入的单篇文章组件名正确，修正路由配置：

// 确保导入的是你写的BlogSingle组件，动态参数保持:id
<Route path='/posts/:id' element={<BlogSingle />} />

2. 修正BlogSingle组件的参数读取逻辑
   将useParams()的解构字段和路由参数名对齐，同时补全useEffect依赖、增加参数非空判断：

const BlogSingle = () => {
  const [content, setContent] = useState(null);
  // 路由参数是id，解构时重命名为postId即可，也可以直接解构id后续替换变量名
  const { id: postId } = useParams();

  async function fetchPostContent() {
    // 避免参数未就绪时发起无效请求
    if (!postId) return;
    const response = await fetch(`https://khg.com.ng/wp-json/wp/v2/posts/${postId}`);
    const data = await response.json();
    setContent(data);
  }

  useEffect(() => {
    fetchPostContent();
  // 将postId加入依赖数组，参数变化时自动重新拉取内容
  }, [postId]);

  return (
    <div>
      <h1>{postId}</h1>
      {/* 其他内容渲染逻辑 */}
    </div>
  )
}

3. 链路校验
   你在BlogPosts组件中写的Link跳转逻辑to={/posts/${postId}}本身没有问题，只要确保从父组件传入的postId是有效值即可，无需额外修改。

验证方法：修改完成后跳转至单篇文章页，控制台将打印正确的文章id，接口请求路径也会正确拼接id值，不会出现undefined。

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