React中useParams Hook持续返回undefined问题排查求助

云上老周

2026-10-6

问题原因

useParams() 只能在匹配了对应动态路由规则的路由组件内部获取到参数，你有两个场景会用到Recipe组件：
1. 在/recipes路由下的Recipes组件内遍历渲染为列表项，此时当前路由没有:id参数，调用useParams()自然返回undefined
2. 只有用户访问/recipes/xxx命中你定义的/recipes/:id路由时，这个路由直接渲染的Recipe组件才能通过useParams()拿到id值
额外bug：你把删除按钮放在了<Link>标签内部，点击按钮会同时触发删除逻辑和页面跳转，且handleDelete调用时没有传入id参数。
额外bug：/recipes/:id路由直接渲染Recipe组件时，没有传入recipe属性，访问recipe.title会报错。

解决方案

直接复用Recipe组件已经接收的recipe属性里的id即可，不需要在列表渲染场景调用useParams()，仅在详情页场景（命中/recipes/:id路由时）用useParams()拿id获取对应食谱数据。

修正后的Recipe.js代码

import { useDispatch, useSelector } from 'react-redux';
import { deleteRecipe } from './actions';
import { Link, useParams } from 'react-router-dom';


function Recipe({ recipe: propsRecipe }) {
    const dispatch = useDispatch();
    const { id } = useParams();
    // 处理详情页场景：如果没有传入recipe props，就从redux store里根据路由id取数据
    const recipe = propsRecipe || useSelector(state => state.recipes.find(item => item.id === id));

    const handleDelete = () => {
        dispatch(deleteRecipe(recipe.id));
    }

    return (
        <div>
            <Link to={`/recipes/${recipe.id}`}>
                <h5>{recipe.title}</h5> 
            </Link>
            <button onClick={handleDelete}>Delete</button>
        </div>
    )
}

export default Recipe