React+MongoDB带参数GET请求异常：返回数据为null求助

问题现象 #

请求返回200状态码但数据为null，后端日志显示query为undefined；硬编码findOne({'name': 'Test2'})可正常返回目标文档，说明问题出在前端参数的后端获取方式上。

核心原因 #

前端通过axios的params选项传递的是URL查询参数（格式为?currentName=xxx），但后端错误使用了req.params来获取——req.params是用来获取路由参数（比如路由定义为/test/:currentName时的xxx部分），两者不匹配导致参数无法获取。

解决方案 #

1. 后端代码修正

将参数获取方式从req.params改为req.query，对应前端传递的查询参数：

recordRoutes.route("/test").get(function (req, res) {
  let db_connect = dbo.getDb();
  let query = req.query.currentName; // 改用req.query获取查询参数
  console.log('QUERY:', query);

  db_connect.collection("records").findOne({'name': query}, function (err, result) {
    if (err) throw err;
    res.json(result);
  });
});

2. 前端代码优化（可选）

原前端代码的then链存在逻辑问题：第一个then未返回数据，导致第二个then的data为undefined。可以优化为更清晰的async/await写法：

const fetchUser = useCallback(async (e) => {
  e.preventDefault();
  try {
    const response = await axios.get(`http://localhost:5000/test`, { params: { currentName } });
    console.log('RESPONSE IS:', response);
    const data = response.data;
    console.log('DATA IS:', data);
    setData(data);
  } catch (e) {
    console.log(e);
  }
}, [currentName]);

备选方案（路由参数方式） #

如果希望使用路由参数传递值，需要同时修改前后端：

• 后端路由改为：recordRoutes.route("/test/:currentName").get(...)
• 前端请求改为：axios.get(http://localhost:5000/test/${currentName})
• 后端仍使用req.params.currentName获取参数

这种方式更适合参数代表具体资源标识的场景，查询参数则更适合搜索类请求。

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