Can't get user description in Redux + Firebase - reactjs

Question

Although I have successfully fetched users and profiles but I don't know why this error below occurs:
Cannot read property 'content' of undefined
{content: "Hello world", status: 2}
Initially, I use Firestore and this time fetch 2 docs from different collections, users and profiles.
redux code:
export function fetchUser(id) {
return dispatch => {
usersRef
.doc(id)
.get()
.then(doc => {
profilesRef
.where("uid", "==", id)
.where("status", "==", doc.data().current_status)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(snapshot) {
const profileItems = { ...doc.data(), profiles: snapshot.data() };
dispatch({
type: FETCH_USER,
payload: profileItems
});
});
});
});
};
}
In container:
import { FETCH_USER } from "../actions";
const initialState = {};
export default (state = initialState, action) => {
switch (action.type) {
console.log("action", action.payload)
// successfully fetched, user info and profiles: profiles info
case FETCH_USER:
return action.payload;
default:
return state;
}
};
In view:
function mapStateToProps({ users }) {
console.log("content", user.profiles.content)
// Cannot read property 'content' of undefined
return { user: users, profiles: user.profiles };
}
reducer file:
import { createStore, applyMiddleware, combineReducers } from "redux";
import UsersReducer from "./reducer_users.js";
const rootReducer = combineReducers({
users: UsersReducer,
});
const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

Answer 1

Here you are making mistack you are accessing user instead of users
function mapStateToProps({ users , content }) {
console.log("content", user.profiles.content) // change user to users
console.log("content",content) // you can directly access content here
return { user: users, profiles: user.profiles };
}
you can initialize default state here
add one more type FETCH_USER_COMPLETE
import { FETCH_USER } from "../actions";
const initialState = {
content : '',
users : ''
};
export default (state = initialState, action) => {
switch (action.type) {
console.log("action", action.payload)
// successfully fetched, user info and profiles: profiles info
case FETCH_USER:
return { ...state , action.payload };
case FETCH_USER_COMPLETE :
return { ...state , users : action.payload.users , content : action.payload.users.profiles.content };
default:
return state;
}
};

Answer 2

I think it might not be best practice but I have solved like this:
from:
querySnapshot.forEach(function(snapshot) {
const profileItems = { ...doc.data(), profiles: snapshot.data() };
dispatch({
type: FETCH_USER,
payload: profileItems
});
});
to:
querySnapshot.forEach(function(snapshot) {
const userItems = { ...doc.data(), ...snapshot.data() };
dispatch({
type: FETCH_USER,
payload: userItems
});
});
I can get content like {user.content}.