这是useMediaQuery钩子的预期行为。在MUI文档中有解释：
要执行服务器端的水合，钩子需要渲染两次。第一次使用false，即服务器的值，第二次使用解析的值。这种双通道渲染循环有一个缺点。慢一点如果只进行客户端渲染，则可以将此选项设置为true。
因此，要在第一个页面上获得正确的值，呈现useMediaQuery钩子中的noSsr选项需要是true。
有两种选择：

1）每个组件：

const mobile = useMediaQuery((theme) => theme.breakpoints.only('mobile'), {noSsr: true});

2）theme对象全局：

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
          noSsr: true,
      },
    },
  }

显然，这只会工作 * 没有 * 服务器端渲染。
下面的原始答案在Material-UI v4中有效，但Hidden组件在v5中已被弃用。

原始答案：

我意识到，通过删除媒体查询并将其替换为Material-UI <Hidden />组件，它可以按照我想要的方式工作。

export const ResponsiveMenuItem = forwardRef((props, ref) => {
  const { children, ...other } = props;

  return (
    <>
      <Hidden smUp>
        <option ref={ref} {...other}>
          {children}
        </option>
      </Hidden>
      <Hidden only="xs">
        <MenuItem ref={ref} {...other}>
          {children}
        </MenuItem>
      </Hidden>
    </>
  );
});

我也有同样的问题

const breakpointDownLg = useMediaQuery(theme.breakpoints.down("lg"));
{breakpointDownLg ? <Navigation /> : <DesktopNavigation /> }

到

<Box sx={{ display: { lg: "none" } }} >
 <Navigation />
</Box>
<Box sx={{ display: {xs: "none", lg: "block" } }}>
 <DesktopNavigation />
</Box>

这似乎有效https://mui.com/material-ui/migration/v5-component-changes/#hidden