面试题：Next.js 动态路由参数反序列化中的类型安全问题

Question

在 Next.js 应用中，从动态路由获取的参数在反序列化时，如何确保参数的类型安全，比如从`pages/user/[userId].js`获取的`userId`，预期是一个数字类型，怎样防止获取到非数字类型导致的错误？请阐述完整的解决方案及相关代码实现。

Answer 1

1. 解决方案思路：
   • 在 Next.js 中，动态路由参数是以字符串形式传递的。要确保userId是数字类型，可以在获取参数后进行类型检查和转换。如果转换失败，需要处理错误，以防止应用程序出现异常。
2. 代码实现：
   • 在pages/user/[userId].js文件中：

import { useRouter } from 'next/router';

const UserPage = () => {
    const router = useRouter();
    const { userId } = router.query;

    let validUserId;
    if (typeof userId ==='string') {
        const num = parseInt(userId, 10);
        if (!isNaN(num)) {
            validUserId = num;
        } else {
            // 处理非数字的情况，比如重定向到错误页面
            router.push('/error');
            return null;
        }
    } else {
        // 处理异常情况，比如重定向到错误页面
        router.push('/error');
        return null;
    }

    return (
        <div>
            <p>User ID: {validUserId}</p>
        </div>
    );
};

export default UserPage;

• 上述代码中，首先从router.query获取userId，它是字符串类型。然后使用parseInt将其转换为数字，并通过isNaN检查转换是否成功。如果userId不是字符串类型或者转换失败，就重定向到错误页面，以确保应用程序的类型安全。