传递NextRouter至RecoverForm时触发TypeScript类型不匹配错误

错误原因分析 #

1. 第一个类型不匹配错误：RecoverForm函数定义的参数类型是包含router属性的Props对象，但调用时传入的是useRouter()返回的NextRouter实例，两者类型不匹配触发报错。
2. 第二个属性不存在错误：函数内部直接调用router.push()，但此时router参数的类型是Props，而Props本身没有push方法——push是NextRouter实例的方法，必须访问Props内部的router属性才能调用。

解决方案 #

方案一：直接接收NextRouter实例（推荐） #

修改RecoverForm函数，让它直接接收NextRouter类型的参数，无需额外的Props接口：

import { NextRouter } from "next/router";
import { schema } from "./recover-schema";

export const RecoverForm = (router: NextRouter) => ({
  initialValues: {
    email: null,
  },
  onSubmit: (values: any) => {
    router.push("/account/login");
    // 处理表单提交后的逻辑，比如发送验证邮件请求
  },
  validationSchema: schema,
});

此时Reset组件里的原调用代码无需修改，RecoverForm(router)会正确匹配类型。

方案二：保留Props接口（适用于需要扩展参数的场景） #

如果后续需要给RecoverForm添加更多参数，可以保留Props接口，但要调整函数的参数解构和调用方式：

1. 修改RecoverForm函数，解构Props里的router属性：

import { NextRouter } from "next/router";
import { schema } from "./recover-schema";

interface Props {
  router: NextRouter;
  // 可按需添加其他参数，比如提示文案、接口地址等
}

export const RecoverForm = ({ router }: Props) => ({
  initialValues: {
    email: null,
  },
  onSubmit: (values: any) => {
    router.push("/account/login");
    // 处理表单值
  },
  validationSchema: schema,
});

2. 在Reset组件里调用时，传入包含router的对象：

export default function Reset() {
  const router = useRouter();
  const formik = useFormik(RecoverForm({ router }));
  return (
    <form onSubmit={formik.handleSubmit}>
      <PlainInput type="email" name="email" formik={formik} />
      <Button text="Send Email" type="submit" />
    </form>
  );
}

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