下面的代码应该是不言自明的。如果不是，请阅读@mantine/form包文档。

import { Select } from "@mantine/core";
import { useForm } from "@mantine/form";

const data = [
  { value: "", label: "Select an option", disabled: true },
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
];

export default function MyForm() {
  // create a form with initial values (field: value map)
  // that match the `value`s defined in `data:
  const form = useForm({
    initialValues: {
      status: "",
    },
  });

  // create form submit handler:
  const formOnSubmit = form.onSubmit(
    (values) => console.log(values),
    // optional, as form.getInputProps() can make inputs display the error themselves:
    (errors) => console.error(errors)
  );

  return (
    <form onSubmit={formOnSubmit}>
      <Select
        label="Status"
        placeholder="Status"
        data={data}
        {...form.getInputProps("status")}
      />

      <Group position="right" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

我使用这个代码：

import { Select } from "@mantine/core";
import { useForm } from "@mantine/form";

const data = [
    { value: '', label: 'Select' },
    { value: 2, label: 'New' }
];

export default function MyForm() {
    const form = useForm({
        initialValues: {
            status: ''
        },
    });
    return (
        <form onSubmit={form.onSubmit((values) => console.log(values))}>
            <Select label="Status" placeholder="Status"
                data={data}
                {...form.getInputProps('status')} />
            <Group position="right" mt="md">
                <Button type="submit">Submit</Button>
            </Group>
        </form>
    );
}

我相信您可以通过转换“value”的类型来解决这个问题。
这是未记录的，并且可能会在将来的版本中中断，但您可以执行以下操作：

import { Select } from "@mantine/core";
import { useForm } from "@mantine/form";

const data = [
    { value: '', label: 'Select' },
    { value: 2 as any, label: 'New' } // <-- here's the magic
];

export default function MyForm() {
    const form = useForm({
        initialValues: {
            status: ''
        },
    });
    return (
        <form onSubmit={form.onSubmit((values) => console.log(values))}>
            <Select label="Status" placeholder="Status"
                data={data}
                {...form.getInputProps('status')} />
            <Group position="right" mt="md">
                <Button type="submit">Submit</Button>
            </Group>
        </form>
    );
}

我假设在Select内部最终发生的是一些相等性检查，这些检查将通过数字和字符串，因此在呈现时选择正确的项，在提交时输出正确的值。
我个人在zodResolver中使用这个方法，zodResolver会强烈抱怨在它期望数字的地方提供字符串，我不愿意为了处理这个问题而使我的zod模式更加复杂。
公平地说，我很欣赏Mantine采取只支持字符串的方法，因为原生HTML <select />元素总是会给予您字符串，而打开其他任何东西的大门可能是一项大量的工作。
尽管如此，似乎只是提供数字值，并保持as any（或者如果您不喜欢整个简洁的事情，您可以使用as unknown as string）的类型脚本是一种享受-至少现在是这样！