MERN应用中如何通过Context API在React组件获取带id的Express参数

算力阿峰

2026-10-4

问题排查和修复方案

1. 接口查询逻辑错误（优先级最高）

你当前控制器的查询逻辑是：

const userTransactions = await Transaction.findById(req.params.id)

findById是用来查询Transaction集合的主键_id的，但你的路由命名是/usertransactions/:id，显然这里的:id是用户ID，你用交易表的主键去匹配用户ID，自然查不到数据，返回空值。
正确的写法应该是按用户ID字段查询所有关联交易，假设你的交易表中存储用户ID的字段是userId：

const userTransactions = await Transaction.find({ userId: req.params.id })

2. 前端响应取值路径错误

Postman请求正常返回200，先确认你控制器的返回格式：
如果你的控制器返回是：

res.json(userTransactions)

那前端result.data就是交易数据本身，你现在写的result.data.data多取了一层不存在的data字段，自然得到undefined，改成：

payload: result.data

如果你的控制器返回是包裹了一层data：

res.json({ data: userTransactions })

才需要用result.data.data取值。

3. 确认前端路由参数是否正确

先在React代码中打印id确认取值正常：

let { id } = useParams();
console.log('拿到的用户ID：', id)

要确保你React路由配置中对应的参数名就是id，比如路由配置是/usertransactions/:id，如果参数名是userId，你用{id}取值就会得到undefined，请求路径就会出错。

4. 确认授权信息携带正确

你的路由加了auth中间件，Postman测试时应该是带了Authorization请求头（比如Token），你当前前端的请求配置里只加了Content-Type，没有携带授权信息，会被权限校验拦截，拿不到正常返回。
在请求头中补充授权字段即可，示例：

const config = {
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${localStorage.getItem('token')}` // 按你实际的存储方式和前缀调整
  },
};