Type not assignable (React + Typescript + Firebase)

Question

I'm pretty new at typescript and migrating my react app to using ts.

I'm using the firebase auth service and I'm facing some type issues which I can't seem to get around. Please advise!

import React, { useEffect, useState } from 'react';
import app from './firebase';

export const AuthContext = React.createContext(null);

export const AuthProvider: React.FC<Props> = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    app.auth().onAuthStateChanged((user) => {
      // ts error here
      setCurrentUser(user);
      setPending(false);
    });
  }, []);

  if(pending){
    return <>Loading...</>;
  }

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

interface Props {
  children: React.ReactNode;
}

setCurrentUser(user); is giving me an error of Argument of type 'User | null' is not assignable to parameter of type 'SetStateAction<null>'.

and

value={{ currentUser }} is giving me an error of Type '{ currentUser: null; }' is not assignable to type 'null'.

isa_toltar · Accepted Answer · 2020-05-20 10:52:55Z

1

The user parameter that returns from firebase ,it's type is not assignable to null,so you should create a type or interface for that use or you could just try to add 'any' like this:

const [currentUser, setCurrentUser] = useState<any>(null);

answered May 20, 2020 at 10:52

isa_toltar

5946 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samir0067 · Accepted Answer · 2021-04-15 05:19:08Z

0

For me I added to the context and it worked

export const AuthContext = createContext<any>(null)

answered Apr 15, 2021 at 5:19

samir0067

611 silver badge4 bronze badges

Collectives™ on Stack Overflow

Type not assignable (React + Typescript + Firebase)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related