Next.jsとCloud Firestoreのデータフェッチエラーを解決したい

Question

前提

React(Next)でタイマーアプリを作っています。
Cloud Firestoreから「タスク：name、作業時間：time」をデータフェッチして、
グラフ(ApexCharts)にレンダリングすることを考えています。

一つ目のタスク（React勉強）と作業時間をグラフ化することはできています。

実現したいこと

一つ目のタスク（React勉強）と二つ目のタスク（Vue勉強）を比較するようなグラフを作成したいです。

発生している問題・エラーメッセージ

F12でComponentsを確認したところ、二つ目のタスク（Vue勉強）に入るはずのデータフェッチができていません。

data[]には、Cloud Firestoreで手動設定した以下のデータが入るはずです。

data	x	y
1	1629545753000	10
2	1629558000000	30
3	1629730800000	30
4	1629903600000	45

該当のソースコード

Cloud Firestoreから「タスク：name、作業時間：time」をデータフェッチします。
src/util/firebase.js

    getSeries = async(userId) => {
        const getRecords = async(userId, categoryId) => {
            let data = []; //ここにタスク1, 2, 3各々のname, timeを格納したいです。
            const ref = db.collection('users').doc(userId).collection('record').where('categoryId', '==', categoryId);
            try {
                const querySnapshot = await ref.get();
                await Promise.all(
                    querySnapshot.docs.map((doc) => {
                        if (doc.exists) {
                            data.push({ x: doc.data().date, y: doc.data().time });
                        }
                    }),
                );
                return data;
            } catch (e) {
                throw e;
            }
        };

        let series = [];　//ここにdata[0], data[1]を格納したいです。
        const ref = this.categories.where('userId', '==', userId);
        try {
            await ref.get().then(async function(querySnapshot) {
                await Promise.all(
                    querySnapshot.docs.map(async(doc) => {
                        if (doc.exists) {
                            const records = await getRecords(userId, doc.id);
                            series.push({ name: doc.data().name, data: records });
                        }
                    }),
                );
            });
            console.log('return');
            return series;
        } catch (e) {
            throw e;
        }
    };

グラフ(ApexCharts)に組み込む。
src/views/ApexCharts/index.tsx

import React from 'react';
import ReactApexChart from 'react-apexcharts';

type GraphData = {
  x: string;
  y: number;
};

type Series = {
  name: string;
  data: GraphData[];
}[];

type GraphProps = {
  series: Series;
};

const Graph: React.FC<GraphProps> = ({ series }) => {
  const state = {
    series: series,
    options: {
      chart: {
        height: 350,
        type: "area" || "line" || "bar" || "histogram" || "pie" || "donut" || "radialBar" || "scatter" || "bubble" || "heatmap" || "treemap" || "boxPlot" || "candlestick" || "radar" || "polarArea" || "rangeBar",
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'smooth',
      },
      xaxis: {
        type: 'datetime',
        labels: {
          datetimeFormatter: {
            year: 'yyyy',
            month: "MMM'yy",
            day: 'MM/dd',
            hour: 'HH:mm',
          },
        },
      },
      tooltip: {
        x: {
          format: 'dd/MM/yy HH:mm',
        },
      },
    },
  };

  //record内のdateに登録する値(number)
  let date = new Date('2021/08/26').getTime();
  console.log(date);

  return (
    <div id="chart">
      <ReactApexChart options={state.options} series={state.series} type="area" height={350} />
    </div>
  );
};

レンダリングする。
src/pages/indexx.tsx

const DynamicGraphComponentWithNoSSR = dynamic(() => import('../views/ApexCharts/index'), { ssr: false });

const Home = ({ currentUser }) => {
  const [series, setSeries] = useState([]);
  const getSeries = async (userId: string) => {
    try {
      const series = await firebase.getSeries(userId);
      setSeries(series);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    
        <div style={{ marginBottom: 40 }}>
          <p className="title">作業時間</p>
          <DynamicGraphComponentWithNoSSR series={series} />
        </div>
  );
};

補足情報（FW/ツールのバージョンなど）

{
  "name": "pomodoro-clock",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "apexcharts": "^3.27.1",
    "chart.js": "^3.3.2",
    "error": "10.4.0",
    "firebase": "^8.6.5",
    "next": "^11.1.0",
    "nookies": "^2.5.2",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-chartjs-2": "^3.0.3",
    "react-dom": "17.0.2",
    "react-heat-calendar": "^1.1.3",
    "react-lottie-player": "^1.3.1",
    "recharts": "^2.1.1",
    "swiper": "^6.6.2",
    "vue-chartjs": "^3.5.1"
  },
  "devDependencies": {
    "@types/material-ui": "^0.21.8",
    "@types/node": "^15.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "typescript": "^4.2.4"
  }
}

ここにより詳細な情報を記載してください。

Answer 1

Cloud Firestoreに登録していたcategoryIdの先頭にスペースが入っており、
データフェッチできていませんでした。