Next.js翻译加载函数TypeScript类型错误，如何正确定义？

你当前的问题出在TDictionary的类型定义上——你现在取的是字典加载函数的类型（() => Promise<翻译对象>），而非实际翻译对象的类型。这导致await getDictionary(...)后得到的是一个函数，而非你期望的翻译对象，自然无法直接访问dict.navbar。

修改类型定义即可解决问题，具体步骤如下：

1. 修正TDictionary的类型：
   使用TypeScript的ReturnType提取字典加载函数的返回值类型（即Promise<翻译对象>），再通过Awaited提取Promise内部的实际翻译对象类型：

   import "server-only";
   import i18nConfig from "../../i18n-config";
   
   const dictionaries = {
     en: () =>
       import("../../dictionaries/en.json").then((module) => module.default),
     hr: () =>
       import("../../dictionaries/hr.json").then((module) => module.default),
   };
   
   // 提取实际翻译对象的类型
   type TDictionary = Awaited<ReturnType<typeof dictionaries["en"]>>;
   
   export const getDictionary = async (locale: string): Promise<TDictionary> =>
     dictionaries[
       i18nConfig.locales.includes(locale) ? locale : i18nConfig.defaultLocale
     ]();
   

2. 组件中正常使用：
   此时await getDictionary(props.params.lang)得到的dict就是翻译对象类型，可直接访问属性：

   export default async function Navbar ( props: ILangParams ) {
     const dict = await getDictionary(props.params.lang); 
   
     return (
       <nav className={styles.navbar}>
         <Link href="/" className={styles.linkLogo}>
           <Image
             priority
             src={logo}
             alt={dict.navbar.links.home}
             className={styles.logo}
           />
         </Link>
       </nav>
     );
   }
   

原理说明 #

• ReturnType<typeof dictionaries["en"]>：获取en这个加载函数的返回值类型，也就是Promise<{ navbar: { ... } }>。
• Awaited<...>：提取Promise解析后的实际值类型，也就是翻译对象本身的结构类型。

这样定义后，getDictionary返回的Promise会正确解析为翻译对象类型，await后就能直接访问字典属性了。

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