面试题：Next.js 中 getStaticPaths 如何处理动态路由参数的验证

验证方法：
- 在 getStaticPaths 函数中获取动态路由参数后，使用正则表达式或 JavaScript 的类型判断方法来验证参数是否符合特定格式。例如，若参数只能是数字，可以使用 isNaN 函数判断是否为非数字，或者使用正则表达式 /^\d+$/ 来匹配纯数字字符串。

代码示例：

export async function getStaticPaths() {
  // 假设这里从 API 获取所有可能的动态路由参数值
  const res = await fetch('https://example.com/api/ids');
  const data = await res.json();
  const paths = data.map((id) => ({ params: { id: id.toString() } }));

  // 过滤不符合格式（非数字）的参数
  const validPaths = paths.filter((path) => {
    const param = path.params.id;
    return!isNaN(parseInt(param)) && parseInt(param).toString() === param;
  });

  return { paths: validPaths, fallback: false };
}

export async function getStaticProps({ params }) {
  const id = params.id;
  // 这里可以使用已经验证过的 id 从 API 获取数据
  const res = await fetch(`https://example.com/api/data/${id}`);
  const data = await res.json();
  return { props: { data }, revalidate: 60 };
}

const Page = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default Page;

上述代码中，在 getStaticPaths 函数里，通过 filter 方法使用 !isNaN(parseInt(param)) && parseInt(param).toString() === param 对可能的动态路由参数进行验证，只保留符合数字格式的参数作为有效的路由路径。在 getStaticProps 函数中，可以放心使用经过验证的动态路由参数 id 来获取数据。

星途面试题库

面试题：Next.js 中 getStaticPaths 如何处理动态路由参数的验证

知识考点

面试题答案