React JS and Redux: Uncaught typeerror cannot read property of null (reading 'displayname')

Question

I know this question has been asked many times before and I have tried the answers, but my problem still persists.

I am making a website using ReactJS, Redux with Firebase Authentication and Realtime DB. I am trying to fetch displayName and photoURL using props from redux. These are the relevant codes.

index.js

const store = createStore(combinedReducers)

const IndexRoutes = (props) => {

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        props.setUser(user)
        props.history.push("/");
      } else {
        props.setUser(null)
        props.history.push("/login");
      }
    })
  }, []);
  console.log(`user: ${props.currentUser}`)

  return (
    <Switch>
        <Route path='/login' component={Login} />
        <Route path='/register' component={Register} />
        <Route path='/' component={App} />
    </Switch>
  )
}

const mapStateToProps = (state) => {
  return {
    currentUser: state.user.currentUser
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    setUser: (user) => {dispatch(setUser(user))}
  }
}
const IndexRouter = withRouter(connect(mapStateToProps, mapDispatchToProps)(IndexRoutes))

root.render(
  <Provider store={store}>
    <Router>
      <IndexRouter />
    </Router>
  </Provider>,
  document.getElementById('root')
);

The console.log() returns user: null, which is causing the problem. I am positively loggedIn to the app, but still showing user null.

fetching displayName and photoURL using props

const UserInfo = (props) => {

    return (
            <div>
                <Box
                    display={'flex'}
                    flexDirection={'row'}
                    alignItems='center'
                    justifyContent={'center'}
                    color='white'
                    paddingTop={2}
                    paddingBottom={2}
                    sx={{height: '100%', flex: 1}}
                >
                    <Avatar
                        alt='profile-pic'
                        src={props.user.photoURL} 
                    />
                    <Typography
                        sx={{ml: 10}}
                    >
                        {props.user.displayName}
                    </Typography>
                </Box>
            </div>
        )
}

const mapStateToProps = (state) => {
    return {
        user: state.user.currentUser
    }
}

export default connect(mapStateToProps)(UserInfo)
        

But, whenever I refresh the page, I get this error uncaught typeerror cannot read property of null (reading 'displayname')

Also, I am using Firebase for backend, even if I use firebase.auth().currentUser.displayName to show data instead of props, it still shows the same error. (although I am already authenticated and signed in).

Answer 1

first time data always be null at that time they set the data so passing down to ternary expression check if data is there then set the data

        <Avatar
          alt='profile-pic'
          src={props?.user?.photoURL} 
        />
        <Typography
          sx={{ml: 10}}
        >
          {props?.user?.displayName}
        </Typography>