React/Next.js SSR移动端检测时useIsMobile返回null问题求助

核心问题 #

你没有在页面的getServerSideProps中调用getIsSsrMobile函数，导致pageProps.isSsrMobile未被赋值，Context传递的是undefined，最终引发异常输出。

具体修复步骤 #

1. 在页面中添加getServerSideProps传递检测值
   以pages/index.tsx为例，必须通过getServerSideProps获取移动端检测结果并传递给页面属性：

   // pages/index.tsx
   import { getIsSsrMobile } from '../src/utiles/isMobile';
   import { GetServerSideProps } from 'next';
   import { useIsMobile } from '../src/hooks/useIsMobile';
   
   // 服务端获取移动端状态
   export const getServerSideProps: GetServerSideProps = async (context) => {
     const isSsrMobile = getIsSsrMobile(context);
     return { props: { isSsrMobile } };
   };
   
   export default function Home() {
     const isMobile = useIsMobile();
     console.log("useIsMobile", isMobile);
     return <div>首页内容</div>;
   }
   

2. 修正_app.tsx的类型与导入（若有问题）
   确保正确导入AppProps类型，且Context路径无误：

   // pages/_app.tsx
   import type { AppProps } from 'next/app';
   import { IsSsrMobileContext } from '../src/contexts/isSsrMobileContext';
   import { Provider } from 'react-redux';
   import store from '../src/store'; // 确保store路径正确
   
   function MyApp({ Component, pageProps }: AppProps<{ isSsrMobile: boolean }>): JSX.Element {
     return (
       <IsSsrMobileContext.Provider value={pageProps.isSsrMobile}>
         <Provider store={store}>
           <Component {...pageProps} />
         </Provider>
       </IsSsrMobileContext.Provider>
     );
   }
   
   export default MyApp;
   

3. 检查其他可能的错误点

   • 确认useIsMobile钩子中Context的导入路径正确（../contexts/isSsrMobileContext）
   • 验证getIsSsrMobile函数中user-agent的获取：如果请求没有user-agent，可添加默认值避免报错：

     const userAgent = context.req.headers["user-agent"] || '';
     const md = new MobileDetect(userAgent);
     

内容的提问来源于stack exchange，提问作者S.M_Emamian