Next SSR场景下动态导入React Hook遇TypeScript错误求助

核心问题分析 #

你之前的动态导入方式本身就不符合React Hook规则——Hook必须在组件顶层同步调用，不能放在async函数里用await导入，这不仅会触发TypeScript错误，还会违反Hook的调用顺序要求。另外，根源是localStorage只存在于浏览器环境，SSR时Node.js端没有window对象，所以得先让Hook本身兼容SSR，再处理导入问题。

第一步：让useLocalStorage Hook兼容SSR #

直接在Hook内部判断window是否存在，避免SSR时执行浏览器端代码：

// hooks/useLocalStorage.ts
import { useState, useEffect } from 'react';

export default function useLocalStorage<T>(key: string, initialValue: T) {
  // 初始化状态时兼容SSR
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') return initialValue;
    
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (err) {
      console.error(`读取localStorage键 "${key}" 失败:`, err);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = typeof value === 'function' ? value(storedValue) : value;
      setStoredValue(valueToStore);
      
      // 仅在浏览器环境写入localStorage
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (err) {
      console.error(`写入localStorage键 "${key}" 失败:`, err);
    }
  };

  return [storedValue, setValue] as const;
}

第二步：正确导入Hook（无需动态导入） #

现在Hook已经兼容SSR了，直接在客户端组件中同步导入即可：

// 标记为客户端组件（Next.js 13+）
'use client';

import useLocalStorage from '../hooks/useLocalStorage';

export default function Profile() {
  const [username, setUsername] = useLocalStorage('username', 'guest');
  
  return (
    <div>
      <input 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
        placeholder="输入用户名"
      />
    </div>
  );
}

关于你遇到的TypeScript错误解释 #

1. "Property 'default' does not exist on type 'Promise<typeof import(...)>'"
   你直接在import()返回的Promise上取default，正确的异步写法应该是先等待Promise完成，再取导出项：

   // 仅作语法演示，不能在组件顶层用
   const module = await import('../hooks/useLocalStorage');
   const useLocalStorage = module.default;
   

   但这种写法不能用于组件顶层，因为React Hook要求同步调用。

2. "This expression is not callable. Type 'typeof import(...)' has no call signatures"
   你把整个模块对象当作函数调用了，但模块本身不是函数，必须取出default导出的Hook函数才能调用。

若需懒加载相关逻辑（可选） #

如果确实需要懒加载使用useLocalStorage的部分，应该把逻辑封装成客户端组件，再用Next.js的dynamic导入组件（而非直接导入Hook）：

// 页面组件（可在SSR环境运行）
import dynamic from 'next/dynamic';

// 禁用SSR，确保组件只在客户端渲染
const UsernameEditor = dynamic(() => import('../components/UsernameEditor'), {
  ssr: false,
  loading: () => <div>加载中...</div>
});

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <UsernameEditor />
    </div>
  );
}

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