React类型不兼容错误：自定义onChange无法适配Pagination组件

错误原因 #

你出现了跨UI库混用的典型问题：

• 导入的是react-bootstrap的Pagination组件，但同时使用了Material-UI（MUI）的PaginationItem和PaginationRenderItemParams类型，两个库的分页组件API完全不兼容
• React-Bootstrap的Pagination组件onChange回调签名为(event: React.FormEvent<HTMLUListElement>, pageNumber: number) => void，而你定义的handleChange参数用了React.SyntheticEvent，类型不匹配触发TS报错

解决方案 #

方案1：统一使用Material-UI的Pagination组件（推荐，适配现有MUI组件） #

将react-bootstrap的Pagination替换为MUI的对应组件，所有类型和API即可匹配：

修改导入语句：

// 替换原有导入
// import { Pagination } from 'react-bootstrap';
// 改为
import { Pagination } from '@mui/material';

修改后的完整代码：

import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import {
  Pagination,
  PaginationItem,
  PaginationRenderItemParams,
  Switch,
} from '@mui/material';
import { Box } from '@mui/system';

interface Props {
  page: number;
  lastPage: number;
  tickActive?: boolean;
  setTickActive: (event: boolean) => void;
  setPage: (value: number) => void;
}

const PageFooter: React.FC<Props> = ({
  page,
  lastPage,
  tickActive,
  setTickActive,
  setPage,
}) => {
  const handleChange = (_event: React.SyntheticEvent, value: number) => {
    setPage(value);
  };

  return (
    <Box>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingTop: 4,
        }}
      >
        <Box
          sx={(theme) => ({
            color: theme.palette.mode === 'dark' ? 'white' : 'black',
            borderRadius: '6px',
            textTransform: 'uppercase',
            fontFamily: 'Brandon Grotesque Bold',
            fontSize: '13px',
          })}
        >
          Showing page {page} of {lastPage || 1}
        </Box>
        <Pagination
          count={lastPage}
          color="primary"
          page={page}
          renderItem={(item: PaginationRenderItemParams) => (
            <PaginationItem
              components={{
                previous: ArrowBackIcon,
                next: ArrowForwardIcon,
              }}
              {...item}
            />
          )}
          onChange={handleChange}
        />
      </Box>
      <Box sx={{ textAlign: 'right' }}>
        <Box sx={{ mt: 6 }}>
          Tick is active
          <Switch
            checked={tickActive}
            onChange={(event) => setTickActive(event.target.checked)}
          />
        </Box>
      </Box>
    </Box>
  );
};

export default PageFooter;

方案2：继续使用React-Bootstrap的Pagination组件 #

如果坚持使用react-bootstrap，需要调整回调类型并移除MUI相关分页代码：

1. 调整handleChange参数类型：

const handleChange = (event: React.FormEvent<HTMLUListElement>, value: number) => {
  setPage(value);
};

2. 替换分页组件配置（适配react-bootstrap API）：

<Pagination
  activePage={page}
  totalItemsCount={lastPage}
  onChange={handleChange}
/>

（注：react-bootstrap的Pagination参数与MUI不同，需根据官方文档调整细节）

关键提示 #

开发时尽量避免同时混用多个UI库的同类型组件，不仅会引发类型冲突，还会增加打包体积和样式冲突风险。

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