React中处理支付回调URL时参数未定义及状态判断异常的问题求助

我现在在React项目里处理支付回调的逻辑，需求是用户在我的React应用发起支付后，会被跳转到CoralPay支付网关完成交易，完成后再跳转回我的确认页面，我需要根据URL参数来展示支付成功或失败的消息。

我的实现思路是这样的：在确认页面通过useParams()获取URL里的status和id参数，然后根据status的值决定是否调用后端接口查询交易详情。如果status是success，就请求${baseurl}/query/transactionid/${id}拿到支付参考号并设置成功状态；否则直接将状态设为失败。

下面是我的代码实现：

const { status, id } = useParams();

const [paymentRef, setPaymentRef] = useState("");

const [paymentStatus, setPaymentStatus] = useState("");

useEffect(() => {
  // 如果status是'success'，查询支付状态
  if (status === "success") {
    Axios.get(
      `${baseurl}/query/transactionid/${id}`,
      {
        headers: {
          "content-type": "application/json",
          "x-access-token": token,
        },
      }
    )
    .then((data) => {
      setPaymentRef(data.data);
      setPaymentStatus("success");
    })
    .catch((error) => {
      setPaymentStatus("failure");
    });
  } else {
    // 设置状态为'failure'
    setPaymentStatus("failure");
  }
}, [id, status]);

根据CoralPay文档里的确认页面说明：

After successful payment, CoralPay redirects the user to your Confirmation page (Callback URL provided for payment via web) with two parameters status=’success’ and id=<transaction_id>.
If status is success, query the ID using ${baseurl}/query/transactionid/ to retrieve the payment reference and render a success page with success message, e.g. Your payment was successful and has been confirmed. Payment reference:. If status is not equal to success, render failure page.

但现在我遇到了问题：跳转回来的URL是http://reactappName/paymentstatus/?status=success&id=267062191825950，但用useParams()拿到的id是undefined，而且哪怕交易成功了，页面还是显示失败消息。我现在有点摸不着头脑，有没有大佬能帮我看看哪里出问题了？

备注：内容来源于stack exchange，提问作者toney