i18next初始化时机错误导致常量文件翻译失效的问题求助

我最近在尝试用i18n给网站做国际化翻译，大部分内容都顺利搞定了，但唯独卡在了index.js里的常量文件上。

这个常量文件是用来通过映射方法自动生成网站导航栏的，核心代码如下：

<ul className='list-none hidden sm:flex flex-row gap-10'>
  {navLinks.map((nav) => (
    <li
      key={nav.id}
      className={`${
        active === nav.title ? "text-white" : "text-secondary"
      } hover:text-white text-[18px] font-medium cursor-pointer`}
      onClick={() => setActive(nav.title)}
    >
      <a href={`#${nav.id}`}>{nav.title}</a>
    </li>
  ))}
</ul>

当我尝试把导航标题替换成翻译后的内容时，发现i18n总是在index.js导出常量之后才完成初始化，导致这些从常量里取的翻译字符串全是null。举个例子，我这么写的时候：

const navLinks = [
  {
    id: "about",
    title: i18n.t('navbar.about'), // 这里拿到的结果是null
  },
  {
    id: "work",
    title: "Work",
  },
  {
    id: "contact",
    title: "Contact",
  },
];

完全得不到预期的翻译结果，有没有大佬能指点一下该怎么解决这个问题？

备注：内容来源于stack exchange，提问作者Andrea Andrenucci