Firebase集合数据存入ChapterSlice后控制台显示[object Object]问题

问题场景 #

开发漫画阅读页面时，通过Firebase的onSnapshot()获取章节数据后，尝试用useDispatch()将数据存入ChapterSlice，但console.log()输出ChapterSlice中的数据时仅显示[object Object]。

组件代码 #

const dispatch = useDispatch()
const { id } = useParams()

let chapterData

const getChapters = () => {
  db.collection("Manga").doc(id).collection("Chapters")
  .onSnapshot((snapshot) =>  {
    chapterData = snapshot.docs.map((doc) => {
      return {id: doc.id, ...doc.data()};
    })  
    console.log("This is the data that I need ",chapterData)
    dispatch(setChapters(chapterData))
  })
}

const chapterInfo = useSelector(selectChapters) 

console.log("this is what I get " + chapterInfo)

useEffect(() => {
  getChapters()
}, [])

ChapterSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    chapters: [],
}

const chapterSlice = createSlice({
    name: "chapter",
    initialState,
    reducers: {
        setChapters: (state, action) => {
            state.chapters = action.payload;
        }
    }
})

export const { setChapters } = chapterSlice.actions;

export const selectChapters = (state) => state.chapter.chapters;

export default chapterSlice.reducer

问题原因及解决方法 #

1. console.log显示[object Object]的直接原因 #

你使用了字符串拼接（"this is what I get " + chapterInfo），当数组（或对象）与字符串相加时，会自动调用toString()方法，数组的默认toString()结果就是[object Object]。

解决方式：

• 用逗号分隔变量，让console.log直接输出数组：

  console.log("this is what I get ", chapterInfo)
  

• 或者用JSON.stringify格式化输出：

  console.log("this is what I get ", JSON.stringify(chapterInfo, null, 2))
  

2. Redux状态更新的时机验证 #

onSnapshot()是异步操作，组件初始渲染时chapterInfo会是初始的空数组[]；等Firebase返回数据并dispatch后，组件会重新渲染，此时chapterInfo才会是正确的章节数据。你可以在组件中加条件渲染，避免初始空数组的问题：

return (
  <div>
    {chapterInfo.length > 0 ? (
      <div>{/* 渲染章节列表 */}</div>
    ) : (
      <div>加载中...</div>
    )}
  </div>
)

3. 代码优化建议 #

• 移除不必要的chapterData变量，直接在onSnapshot中处理并dispatch：

  .onSnapshot((snapshot) => {
    const chapterData = snapshot.docs.map(doc => ({id: doc.id, ...doc.data()}))
    console.log("获取到的数据", chapterData)
    dispatch(setChapters(chapterData))
  })
  

• onSnapshot会返回一个取消监听的函数，务必在useEffect的清理函数中调用，防止内存泄漏：

  useEffect(() => {
    const unsubscribe = db.collection("Manga").doc(id).collection("Chapters")
      .onSnapshot((snapshot) => {
        const chapterData = snapshot.docs.map(doc => ({id: doc.id, ...doc.data()}))
        dispatch(setChapters(chapterData))
      })
    // 组件卸载时取消监听
    return () => unsubscribe()
  }, [id, dispatch])
  

内容的提问来源于stack exchange，提问作者Ermin