Аргумент типа '{...}' не может быть назначен параметру типа 'Context <AuthProps>'

Question

Я создаю интерфейс входа и регистрации с Firebase, в моем проекте приложения Ioni c (React) ниже приведен фрагмент моего кода.

interface LoginProps extends RouteComponentProps<any> {}
interface AuthProps {}

const Login: FC<LoginProps> = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await Firebase
          .auth()
          .signInWithEmailAndPassword(email.value, password.value);
        history.push("/dashboard");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const { currentUser } = useContext<AuthProps>(AuthContext);

  if (currentUser) {
    return <Redirect to="/" />;
  }

Я получил эти сообщения об ошибках:

[реагировать-скрипты] Ошибка TypeScript в /Users/matheuslira/Desktop/brasilsul-repasse/src/pages/Login.tsx(43,49):

[реаги- scripts] Аргумент типа '{AuthContext: React.Context; AuthProvider: ({children}: {children: any;}) => JSX.Element; } 'нельзя назначить параметру типа' Context '.

[реагировать-скрипты] Тип' {AuthContext: Context; AuthProvider: ({children}: {children: any;}) => Элемент; } 'отсутствуют следующие свойства из типа' Context ': поставщик, потребитель TS2345

сообщение об ошибке указывает на эту часть кода:

const {currentUser} = useContext (AuthContext);

Я не знаю, как исправить эту ошибку.

// Редактировать

Код AuthContext

import React, { useEffect, useState, createContext } from "react"
import Firebase from "./firebase"

export const AuthContext = createContext(null)
export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null)

    useEffect(() => {
        Firebase.auth().onAuthStateChanged(setCurrentUser)
    }, [])

    return (<AuthContext.Provider value = {{currentUser}} >{children}</AuthContext.Provider>)
}

export default {
    AuthContext,
    AuthProvider
}

Answer 1

Это мое решение, и оно работает нормально

// context-fb.tsx
import React, { useEffect, useState, createContext } from "react";
import Firebase, { User } from "firebase";

export interface IAuthContext {
  user: User;
}

const AuthContext = createContext<IAuthContext | null>(null);
const AuthProvider: React.FC = ({ children }) => {
  const [currentUser, setCurrentUser] = useState<IAuthContext | null>(null);

  useEffect(() => {
    Firebase.auth().onAuthStateChanged((user: any) => {
      console.log('state set', user)
      setCurrentUser({ user });
    });
  }, []);

  return (
    <AuthContext.Provider value={currentUser}>{children}</AuthContext.Provider>
  );
};

export default {
  AuthContext,
  AuthProvider
};

базовые c части Login.tsx

import React, { FC, useCallback, useContext } from "react";
import { RouteComponentProps, Redirect } from "react-router";

import Firebase from "firebase";

import Stuff, { IAuthContext } from "../context-fb";

interface LoginProps extends RouteComponentProps<any> {}

const Login: FC<LoginProps> = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await Firebase.auth().signInWithEmailAndPassword(
          email.value,
          password.value
        );
        history.push("/dashboard");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const authInfo = useContext<IAuthContext|null>(Stuff.AuthContext);
  console.log("rendered login", authInfo?.user )

  return authInfo?.user ?  <Redirect to="/home" /> : <div></div>;
};

export default  Login

, а затем мой App.tsx

import Stuff from "./context-fb";

const App: React.FC = () => {

  return <IonApp>
    <IonReactRouter>
      <Stuff.AuthProvider>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/login" component={Login} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/login" />} />
        </IonRouterOutlet>
      </Stuff.AuthProvider>
    </IonReactRouter>
  </IonApp>
};

export default App;