Не удается прочитать свойство 'имя' из неопределенного в Redux + Firebase

Question

Проблема document из Firestore не может быть отображена в React Component. Изначально я получил в Redux такие предметы:

src / actions / index. js

export function fetchItem(id) {
  return dispatch => {
    itemsRef.doc(id).onSnapshot(doc => {
      usersRef.doc(id).onSnapshot(user => {
        statusesRef
          .where("uid","==", id)
          .onSnapshot(function(querySnapshot) {
            querySnapshot.forEach(function(snapshot) {
                const allItems = {
                  item: doc.data(),
                  user: user.data(),
                  status: snapshot.data(),
                };
                dispatch({
                  type: FETCH_ITEM,
                  payload: allItems
                });
            }
          }
      });
    });
  };
}

src / redurs / reducer_items. js

import { FETCH_ITEM } from "../actions";

const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ITEM:
      return action.payload;

    default:
      return state;
  }
};

И тогда я получил allItems с this.props.fetchItem.

class Item extends Component {
  componentDidMount() {
     const { id } = this,proops.match.params;
     this.props.fetchItem(id);
  }
}

render() {
   const { item } = this.props;
   console.log("item", item);
}

const mapDispatchToProps = {
  fetchItem
};

function mapStateToProps({ allItems }) {
  return { item: allItems };
}

export default connect(mapStateToProps, mapDispatchToProps)(Item);

Элемент в консоли -

item:
Object
item: {name: "XXXXXXXXX", image: "XXXXXXXXXXX"}
status: {content: "XXXXXXXXX"}
user: {name: "XXXXXXXX", image: "XXXXXXXXXXXX"}

I может быть успешно доставлен item, включая элемент, пользователя и статус. Но я не могу получить детский документ.

render() {
   const { item } = this.props;
   console.log("item", item);
   console.log("item2", item.item.name);
}

Там написано Cannot read property 'name' of undefined. Но имя показывает в console.log("item").

Answer 1

Я думаю, что это не лучшая практика, но я решил ее с помощью следующего кода:

const allItems = {
  ...doc.data(),
  ...user.data(),
  ...snapshot.data(),
};