将I18Next实例传递给I18NextProvider时输入错误

Question

错误：

“Promise”类型缺少“i18n”类型中的以下属性：t、init、loadResources、use 和 32 more.ts(2740) index.d.ts(344, 3)：预期类型来自属性“i18n”，该属性在类型“IntrinsicAttributes &”上声明。 I18nextProviderProps & { 孩子？：ReactNode; }'

i18n/intex.ts

import { NODE_ENV } from "@/config";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

export default i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

提供商/app.tsx

import { AuthProvider } from "@/lib/auth";
import { queryClient } from "@/lib/react-query";
import { ReactNode, Suspense } from "react";
import { QueryClientProvider } from "react-query";
import { BrowserRouter as Router } from "react-router-dom";
import { ReactQueryDevtools } from "react-query/devtools";
import { ConfigProvider } from "antd";
import en from "antd/lib/locale/en_US";
import { I18nextProvider } from "react-i18next";
import i18n from "@/i18n";

type AppProviderProps = {
  children: ReactNode;
};

export const AppProvider = ({ children }: AppProviderProps) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ConfigProvider locale={en}>
        <QueryClientProvider client={queryClient}>
          {import.meta.env.DEV && <ReactQueryDevtools />}
          <AuthProvider>
            <I18nextProvider i18n={i18n}>
              <Router>{children}</Router>
            </I18nextProvider>
          </AuthProvider>
        </QueryClientProvider>
      </ConfigProvider>
    </Suspense>
  );
};

Answer 1

// this returns a promise not an i18n instance
export default i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

这应该有效：

// don't care for the promise
i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

// just return the instance you have
export default i18n;

或等待承诺（这只能与最高水平的支持一起工作）：

export default await i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});