firebase/snippets-web

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

Shanmukhsvstp opened this issue · 3 comments

Shanmukhsvstp commented

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 commented

@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 commented

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 commented

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>

  • 👍1