Launching straight into the query, I am facing an issue when using console.log(user);. It returns an object with a string value for displayName. However, upon running console.log(user.displayName);, it should display the value Agrim Singh (<-- I've entered this value). Instead, it throws an error message:
TypeError: Cannot read properties of null (reading 'displayName')
Here is a screenshot of the error: https://i.sstatic.net/cCUaF.png
Additionally, I am utilizing NextJS in conjunction with Firebase.
Below is the code snippet from the file [postid].jsx:
const post = ({ post, user }) => {
const [name, setName] = useState("");
const [addComment, setAddComment] = useState("");
const router = useRouter();
const { postid } = router.query;
console.log(user); // <--- Working perfectly.
console.log(user.displayName); // <--- Throwing error.
const handleSubmit = (e) => {
e.preventDefault();
if (!addComment || !name) {
alert("Please fill all the fields proplerly!");
} else {
db.collection("posts").doc(postid).collection("comments").add({
name: name, // <--- Please ignore this line for now
comment: addComment,
});
}
};
return (
<div className="post container text-center">
<h2>{post.title}</h2>
<h5>Created On - {new Date(post.createdAt).toDateString()}</h5>
<br />
<img src={post.imageUrl} alt={post.alt} />
<br />
<p>{post.description}</p>
<br />
<form>
<div className="form-input">
<input
type="text"
name="name"
id="name"
className="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter Your Name"
/>
</div>
<div className="form-input">
<textarea
name="add-comment"
id="add-comment"
className="add-comment"
value={addComment}
onChange={(e) => setAddComment(e.target.value)}
cols="100"
rows="3"
placeholder="Add your Comment"
></textarea>
</div>
<button onClick={handleSubmit} className="btn-warning">
Submit
</button>
</form>
<div className="comments">
<p className="comment">
<b>
<i>Name</i>:
</b>{" "}
<span>Comment</span> {/* <--- I've not programmed this line because of the error. */}
</p>
</div>
</div>
);
};
export default post;
export async function getServerSideProps({ params }) {
const result = await db.collection("posts").doc(params.postid).get();
return {
props: {
post: {
...result.data(),
createdAt: result.data().createdAt.toMillis(),
},
},
};
}
I have passed the user prop to all files in the _app.js file.
Check out the code below:
export default function App({ Component, pageProps }) {
const [user, setUser] = useState(null);
useEffect(() => {
auth.onAuthStateChanged((user) => {
if (user) {
setUser(user);
} else {
setUser(null);
}
});
}, []);
return (
<div className="app">
<div className="banner-div">
<Navbar user={user} />
<img src="/banner.jpg" alt="School Banner" className="banner" />
</div>
<Component {...pageProps} user={user} />
</div>
);
}
Edit: user.displayName functions correctly everywhere except in the [postid].jsx file.
Edit 2: Upon executing
console.log(user);
It displays both null and the object.
Refer to the image:https://i.sstatic.net/aBzXO.png