Next.js 13中如何为searchParams添加类型注解？

问题背景 #

在Next.js 13客户端组件中，使用useSearchParams()获取URL查询参数后，将其传入loginUser函数时，当前用any类型标注searchParams，需要替换为合适的类型注解。

解决方案 #

useSearchParams()返回的是浏览器原生的URLSearchParams类型，这是TypeScript内置类型，无需额外导入，直接使用即可。

修改后的类型定义 #

将LoginUserProps接口中的searchParams: any替换为：

interface LoginUserProps {
  submittedData: FormData;
  setError: React.Dispatch<React.SetStateAction<string | null>>;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
  reset: () => void;
  searchParams: URLSearchParams; // 替换any为URLSearchParams
}

说明 #

• URLSearchParams类型包含所有查询参数操作方法（如get()、has()等），完全匹配代码中searchParams?.get("from")的使用场景。
• TypeScript会自动识别该类型，提供完整的类型提示与检查，避免any带来的类型不安全问题。
• 原代码中searchParams?.get("from") || "/blog"的逻辑依然有效，因为get()方法返回string | null，返回null时会自动 fallback 到"/blog"。

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