How can I cast NextJS router.query as a number?

在Next.js中，使用router.query可以获取到URL中的查询参数（query parameters），但是获取到的值默认是字符串类型的。如果需要将这些参数转换为数字类型，我们可以采用JavaScript的几种常用方法来进行转换。

以下是一个具体的例子来说明如何将router.query中的参数转换为数字：

假设我们的URL是这样的：http://localhost:3000/product?id=123，我们需要获取id参数并将其转换为数字。

首先，我们需要在我们的组件中引入useRouter钩子，然后使用它来访问router.query：

javascript
import { useRouter } from 'next/router';

function ProductPage() {
  const router = useRouter();
  const query = router.query;

  // 获取 id 参数，此时 id 是一个字符串
  const idStr = query.id;

  // 将字符串转换为数字
  let idNum = parseInt(idStr, 10); // 使用 parseInt 并指定基数为 10

  // 检查转换是否成功，如果 idStr 无法转换为数字，则 idNum 将是 NaN
  if (isNaN(idNum)) {
    console.error('The id query parameter is not a valid number');
    idNum = null; // 或者可以设置为默认值，或进行其他处理
  }

  return (
    <div>
      <h1>Product ID: {idNum}</h1>
      {/* 使用 idNum 进行后续操作 */}
    </div>
  );
}

在这个例子中，parseInt() 函数被用来将字符串转换成整数。第二个参数 10 表示数值的基数（十进制系统）。我们还加入了错误处理，以确保当传入的 id 不是有效数字时，能够给出错误提示并进行适当的处理。

此外，如果你预计传入的参数可能是浮点数，应该使用 parseFloat() 替代 parseInt()。

javascript
let idNum = parseFloat(idStr);

这种转换方法适用于所有需要从URL查询参数中获取数字并进行处理的场景，在开发过程中非常常见，特别是在处理具有动态路径和查询参数的应用时。