Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'displayName') in next js

[Shanmukhsvstp]

I tried getting user info as below const user = auth.currentUser; const displayName = user.displayName; const email = user.email; const dpphotoURL = user.photoURL; const uid = user.uid;

but it shows an error that"

Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'displayName')

Source pages\profile.jsx (17:22) @ user

15 | 16 |

17 | const displayName = user.displayName; | ^ 18 | const email = user.email; 19 | const dpphotoURL = user.photoURL; 20 | const uid = user.uid; Call Stack renderWithHooks node_modules\react-dom\cjs\react-dom.development.js (16305:0) mountIndeterminateComponent node_modules\react-dom\cjs\react-dom.development.js (20074:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21587:0) HTMLUnknownElement.callCallback node_modules\react-dom\cjs\react-dom.development.js (4164:0) Object.invokeGuardedCallbackDev node_modules\react-dom\cjs\react-dom.development.js (4213:0) invokeGuardedCallback node_modules\react-dom\cjs\react-dom.development.js (4277:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27451:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopConcurrent node_modules\react-dom\cjs\react-dom.development.js (26543:0) renderRootConcurrent node_modules\react-dom\cjs\react-dom.development.js (26505:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25738:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0) Hide collapsed frames

and in console: Uncaught TypeError: Cannot read properties of null (reading 'displayName') at Profile (profile.jsx:17:23) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopConcurrent (react-dom.development.js:26543:1) at renderRootConcurrent (react-dom.development.js:26505:1) at performConcurrentWorkOnRoot (react-dom.development.js:25738:1) at workLoop (scheduler.development.js:266:1) at flushWork (scheduler.development.js:239:1) at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

[thatfiredev]

@Shanmukhsvstp the user property is null when there's no user currently signed in on your app. Did you check if you are making the call to user.displayName after the user has signed in?

I would recommend wrapping it in an if condition to help you debug:

const user = auth.currentUser;
if (user) {
    const displayName = user.displayName;
    const email = user.email;
    const dpphotoURL = user.photoURL;
    const uid = user.uid;
} else {
    console.log("user is not logged in");
}

[Shanmukhsvstp]

Hmm... Hello @thatfiredev, thanks for your quick reply. My actual usage of this profile data is in profile page. I actually use it as mentioned below:

          <p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>Name:   </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userName'>{user.displayName}</p>          
          <br />
          <p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>Email:   </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userEmail'>{user.email}</p><br />
          <p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>User Id:   </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userID'>{user.uid}</p>

Here, I am facing problems with same error. Please help regarding it. Thankyou.

[Shanmukhsvstp]

Update: Using {user?.displayName} instead or {user.displayName} fixed the error. Updated code:

<p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>Name: </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userName'>{user?.displayName}</p> <br /> <p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>Email: </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userEmail'>{user?.email}</p><br /> <p style={{display:'inline-block', marginRight:'10px', fontSize:"25px"}}><b>User Id: </b></p><p style={{display:'inline-block', fontSize:"25px"}} id='userID'>{user.?uid}</p>