如何解决NextJS与Firebase中的时间戳序列化错误？

Redux要求存储在state中的数据必须是可序列化的（如JSON支持的字符串、数字、数组、普通对象），而Firebase返回的Timestamp是自定义对象，因此会触发非序列化值的错误。以下是几种可行的解决方式：

方法一：获取数据时直接转换为可序列化格式 #

在从Firebase读取数据的阶段，就把Timestamp对象转换成ISO字符串或时间戳数字，确保存入Redux state的是可序列化数据。

示例代码（async thunk中处理）：

import { createAsyncThunk } from '@reduxjs/toolkit';
import { db } from '../firebaseConfig';

export const fetchTargetData = createAsyncThunk('data/fetchTarget', async () => {
  const snapshot = await db.collection('yourCollection').get();
  return snapshot.docs.map(doc => {
    const rawData = doc.data();
    // 将Timestamp转为ISO标准字符串
    return {
      ...rawData,
      dateTime: rawData.dateTime.toDate().toISOString()
    };
  });
});

在组件中使用时，再把ISO字符串转回Date对象格式化显示：

const renderDate = (isoStr) => {
  const date = new Date(isoStr);
  return date.toLocaleString(); // 根据需求自定义格式
};

方法二：配置Redux忽略序列化检查 #

如果需要保留Timestamp对象，可以通过Redux Toolkit的配置忽略特定路径或action的序列化检查。但注意这种方法会影响Redux DevTools的时间旅行功能，不推荐作为长期方案。

示例代码（configureStore中配置）：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略指定路径的非序列化检查
        ignoredPaths: ['data.0.dateTime'],
        // 或者忽略特定action的payload检查
        // ignoredActions: ['data/fetchTarget/fulfilled'],
      },
    }),
});

export default store;

方法三：在Slice的reducer中转换数据 #

如果异步逻辑和数据转换需要分离，可以在slice的extraReducers中处理payload，将Timestamp转为可序列化格式后再存入state。

示例代码：

import { createSlice } from '@reduxjs/toolkit';
import { fetchTargetData } from './thunks';

const dataSlice = createSlice({
  name: 'data',
  initialState: [],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchTargetData.fulfilled, (state, action) => {
      const processedData = action.payload.map(item => ({
        ...item,
        dateTime: item.dateTime.toDate().toISOString()
      }));
      state.push(...processedData);
    });
  },
});

export default dataSlice.reducer;

推荐方案：优先选择方法一，从数据源处转换数据，既符合Redux的设计规范，也能避免后续潜在的序列化相关问题。

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