使用MUI X Date Range Picker遇TypeScript类型不兼容报错求助

我正在使用MUI X Date Range Picker，相关代码如下：

<StaticDateRangePickerStyled
  displayStaticWrapperAs="desktop"
  value={value}
  onChange={handleDatePickerChange}
  renderDay={( 
    date,
    dateRangePickerDayProps: DateRangePickerDayProps<dateFns>
  ) => <DateRangePickerDayStyled {...dateRangePickerDayProps} />}
  dayOfWeekFormatter={(day: string) => dayOfWeek[day]}
  components={{
    LeftArrowButton: ({ onClick }) => (
      <IconButton
        size="md"
        Icon={ArrowBackStyled}
        onClick={onClick}
      />
    ),
    RightArrowButton: ({ onClick }) => (
      <IconButton
        size="md"
        Icon={ArrowForwardStyled}
        onClick={onClick}
      />
    ),
  }}
/>

我的回调函数：

const handleDatePickerChange = useCallback((newValue: DateRange<dateFns>) => {
  setValue(newValue)
}, [])

但TypeScript报错：

Type '(newValue: DateRange<dateFns>) => void' is not assignable to type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void'.

请问我哪里出错了？

问题原因及解决方案 #

1. 回调函数参数数量不匹配 #

MUI X的onChange回调要求接收两个参数：第一个是日期范围值，第二个是可选的键盘输入字符串。你的回调只定义了第一个参数，导致类型不兼容。

修改回调函数，添加第二个可选参数：

const handleDatePickerChange = useCallback(
  (newValue: DateRange<dateFns>, keyboardInputValue?: string) => {
    setValue(newValue)
  },
  []
)

2. 组件未指定适配器类型，导致泛型推断为unknown #

如果你的StaticDateRangePickerStyled是基于StaticDateRangePicker封装的，需要确保组件明确关联了日期适配器（比如AdapterDateFns），否则TypeScript会将日期类型推断为unknown，和你传入的DateRange<dateFns>不匹配。

• 若直接使用组件，需在外层包裹LocalizationProvider指定适配器：

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePickerStyled
    // ...其他props
  />
</LocalizationProvider>

• 若为自定义封装的StaticDateRangePickerStyled，需明确继承正确的泛型类型：

import { StaticDateRangePicker, StaticDateRangePickerProps } from '@mui/x-date-pickers/StaticDateRangePicker';
import { dateFns } from '@mui/x-date-pickers/AdapterDateFns';

const StaticDateRangePickerStyled = styled(StaticDateRangePicker)<StaticDateRangePickerProps<dateFns>>`
  // 自定义样式
`;

3. 确认DateRange类型导入路径 #

确保DateRange是从MUI X的正确路径导入，避免类型来源不匹配：

import { DateRange } from '@mui/x-date-pickers-pro';

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