Formik+Yup+TypeScript报错：绑定元素'field'隐式'any'类型

错误原因 #

TypeScript无法自动推断Formik Field组件渲染回调中field和form参数的类型，因为Formik需要明确知道你的表单值结构才能提供对应的类型定义。

修复步骤 #

方法1：给Formik指定泛型参数（推荐） #

利用你已经定义的Values接口，给Formik组件添加泛型约束，这样Formik会自动推导所有相关类型，包括Field回调里的参数类型，无需手动指定：

1. 修改Formik组件的写法，加上<Values>泛型：

<Formik<Values>
  initialValues={{
    password: "",
    email: "",
  }}
  validationSchema={formSchema}
  onSubmit={(values) => { // 这里values的类型会自动推断为Values，无需手动指定
    console.log("submiting");
    console.log(values);
  }}
>

2. （可选）给formSchema指定类型，让Yup和Values接口关联，增强类型检查：

import { ObjectSchema } from 'yup';

let formSchema: ObjectSchema<Values> = object().shape({
  email: string().email().required("Email is required"),
  password: string().required("Password is required"),
});

方法2：手动指定Field回调参数类型 #

如果不想给Formik加泛型，可以导入Formik的FieldProps类型，直接给回调参数指定类型：

import { FieldProps } from 'formik';

<Field name="email" id="email" type="email">
  {({ field, form }: FieldProps<Values>) => (
    // ... 原有代码
  )}
</Field>

完整修正代码 #

import { ObjectSchema } from 'yup';
import { Formik, Form, Field } from 'formik';
import { Container, Stack, Heading, Box, FormControl, FormLabel, Input, FormErrorMessage, HStack, Checkbox, Button, useBreakpointValue, useColorModeValue } from '@chakra-ui/react';

interface Values {
  password: string;
  email: string;
}

let formSchema: ObjectSchema<Values> = object().shape({
  email: string().email().required("Email is required"),
  password: string().required("Password is required"),
});

const Login: React.FC = () => {
  return (
    <Container
      maxW="lg"
      py={{ base: "12", md: "24" }}
      px={{ base: "0", sm: "8" }}
    >
      <Stack spacing="8">
        <Stack spacing="6">
          <Stack spacing={{ base: "2", md: "3" }} textAlign="center">
            <Heading size={useBreakpointValue({ base: "xs", md: "sm" })}>
              Log in to your account
            </Heading>
          </Stack>
        </Stack>
        <Box
          py={{ base: "0", sm: "8" }}
          px={{ base: "4", sm: "10" }}
          bg={useBreakpointValue({ base: "transparent", sm: "bg-surface" })}
          boxShadow={{ base: "none", sm: useColorModeValue("md", "md-dark") }}
          borderRadius={{ base: "none", sm: "xl" }}
        >
          <Formik<Values>
            initialValues={{
              password: "",
              email: "",
            }}
            validationSchema={formSchema}
            onSubmit={(values) => {
              console.log("submiting");
              console.log(values);
            }}
          >
            <Form>
              <Stack spacing="6">
                <Stack spacing="5">
                  <Field name="email" id="email" type="email">
                    {({ field, form }) => (
                      <FormControl
                        isInvalid={form.errors.email && form.touched.email}
                      >
                        <FormLabel htmlFor="email">Email</FormLabel>
                        <Input {...field} />
                        <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                      </FormControl>
                    )}
                  </Field>
                  <Field name="password" id="password" type="password">
                    {({ field, form }) => (
                      <FormControl
                        isInvalid={
                          form.errors.password && form.touched.password
                        }
                      >
                        <FormLabel htmlFor="password">Password</FormLabel>
                        <Input type="password" {...field} />
                        <FormErrorMessage>
                          {form.errors.password}
                        </FormErrorMessage>
                      </FormControl>
                    )}
                  </Field>
                </Stack>
                <HStack justify="space-between">
                  <Checkbox defaultChecked>Remember me</Checkbox>
                  <Button variant="link" colorScheme="blue" size="sm">
                    Forgot password?
                  </Button>
                </HStack>
                <Stack spacing="6">
                  <Button variant="primary">Sign in</Button>
                </Stack>
              </Stack>
            </Form>
          </Formik>
        </Box>
      </Stack>
    </Container>
  );
};

export default Login;

注：如果PasswordField是自定义组件，需确保它支持Formik field的核心props（如name、value、onChange）并定义对应类型。

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