Reactでリロードをするとエラーが出る

前提

現在ポートフォリオを作成しています。
この質問は複数サイトに投稿しています。
回答が得られた場合は、回答されてない投稿を削除します。

URL
https://manga-kousatu-net.vercel.app/

github
https://github.com/takoyan33/manga-kousatu.net/tree/new-main

実現したいこと

投稿の個別ページでリロードできるようにしたい
例：https://manga-kousatu-net.vercel.app/post/lmk3aFs36UmnwFIDxBlj/

現状だとエラーが出てしまいます。
getData();
usersData();　とすればリロードできるのですが、それだとfirestoreにデータをずっとアクセスし続けてしまうため、重くなってしまいます。
リロード時にエラーが出ないように表示するにはどうすれば良いでしょうか。
よろしくお願いします。

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

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'indexOf')

Source
pages/post/[id].jsx (65:21) @ _callee$

  63 | const getData = async () => {
  64 |   //firestoreからデータ取得
> 65 |   const data = doc(database, "posts", id);
     |                   ^
  66 |   console.log("Error getting document:", id);
  67 |   getDoc(data)
  68 |     .then((documentSnapshot) => {
Call Stack
eval
pages/post/[id].jsx (151:4)
Show collapsed frames

JavaScript
1/post/[id].jsx
2import系
3
4const Post = () => {
5  const [ID, setID] = useState(null);
6  const [context, setContext] = useState("");
7  const [categori, setCategori] = useState("");
8  const [photoURL, setPhotoURL] = useState();
9  const [users, setUsers] = useState(null);
10  const [displayName, setDisplayName] = useState("");
11  const [createtime, setCreatetime] = useState("");
12  const [isUpdate, setIsUpdate] = useState(false);
13  const [posttitle, setPostTitle] = useState("");
14  const databaseRef = collection(database, "CRUD DATA");
15  //データベースを取得
16  const [firedata, setFiredata] = useState([]);
17  const [downloadURL, setDownloadURL] = useState(null);
18  const [likecount, setLikecount] = useState(0);
19  const usersRef = collection(database, "users");
20  const [userid, setUserid] = useState(null);
21  const [netabare, setNetabare] = useState("");
22  const [likes, setLikes] = useState(null);
23  const [selected, setSelected] = useState(["最終回"]);
24
25  let router = useRouter();
26  const { id } = router.query;
27  const auth = getAuth();
28  const user = auth.currentUser;
29
30  const getData = async () => {
31    //firestoreからデータ取得
32    const data = doc(database, "CRUD DATA", id);
33    getDoc(data).then((documentSnapshot) => {
34      setFiredata(documentSnapshot.data());
35    });
36  };
37
38  const getID = (
39    id,
40    title,
41    context,
42    downloadURL,
43    categori,
44    cratetime,
45    netabare,
46    photoURL,
47    userid,
48    likes,
49    selected
50  ) => {
51    setID(id);
52    setContext(context);
53    setPostTitle(title);
54    setDownloadURL(downloadURL);
55    setIsUpdate(true);
56    setCategori(categori);
57    setCreatetime(cratetime);
58    setNetabare(netabare);
59    setPhotoURL(photoURL);
60    setUserid(userid);
61    setLikes(likes);
62    setSelected(selected);
63    console.log(title);
64    console.log(context);
65  };
66
67  const usersData = async () => {
68    //firestoreからデータ取得
69    await getDocs(usersRef).then((response) => {
70      //コレクションのドキュメントを取得
71      setUsers(
72        response.docs.map((data) => {
73          //配列なので、mapで展開する
74          return { ...data.data(), id: data.id };
75          //スプレッド構文で展開して、新しい配列を作成
76        })
77      );
78    });
79  };
80
81  useEffect(() => {
82    getData();
83    usersData();
84  }, [likes]);
85
86  const updatefields = () => {
87更新処理
88}
89  const deleteDocument = (id) => {
90削除処理
91  };
92
93  const handleClick = (id, likes) => {
94いいね処理
95  };
96  return (
97    <>
98      <SiteHead />
99      <MuiNavbar />
100
101      <div className="max-w-5xl m-auto">
102        <div>
103          <div>
104            <div className="lg:w-full my-4 ">
105              {user && (
106                <>
107                  {user.email == firedata.email && (
108更新ボタンと削除ボタン
109
110                  )}
111                </>
112              )}
113              {isUpdate && (
114                 更新フォーム
115              )}
116              <br></br>
117              <p>
118                <Link href="/">トップ</Link>　＞　投稿記事　＞　
119                {firedata.title}
120              </p>
121              <p className="flex justify-center my-6">
122                <Image
123                  className="m-auto text-center max-w-sm"
124                  height={500}
125                  width={500}
126                  src={firedata.downloadURL}
127                />
128              </p>
129              <div>
130                <div className="text-2xl my-4">{firedata.title}</div>
131                <br></br>
132                <p>
133                  <AccessTimeIcon /> 投稿日時：{firedata.createtime}
134                </p>
135                <br></br>
136                {firedata.edittime && (
137                  <p>
138                    <AccessTimeIcon />
139                    編集日時：{firedata.edittime}
140                  </p>
141                )}
142                <br></br>
143                {firedata.selected &&
144                  firedata.selected.map((tag, i) => (
145                    <span className="text-cyan-700" key={i}>
146                      #{tag}　
147                    </span>
148                  ))}
149                <br></br>
150                  <p className="text-left">{firedata.context}</p>
151                  <br></br>
152                  {firedata.contextimage && (
153                    <p className="flex justify-center">
154                      <Image
155                        className="m-auto text-center max-w-sm"
156                        height={500}
157                        width={500}
158                        src={firedata.contextimage}
159                      />
160                    </p>
161                  )}
162                  <br></br>
163                  <p>
164                    <FavoriteIcon />
165                    {firedata.likes}
166                  </p>
167                  <br></br>
168                  {user && (
169                    <SiteButton
170                      href=""
171                      text="いいねする"
172                      className="inline my-2 m-4"
173                      onClick={() => handleClick(id, firedata.likes)}
174                    />
175                  )}
176                  <div key={id} className="cursor-pointer">
177                    {users &&
178                      users.map((user) => {
179                        return (
180                          <>
181                            {firedata.email == user.email && (
182                              <Link href={`/profile/${user.userid}`}>
183                                <div key={user.userid}>
184                                  <div className="bg-slate-200 my-8 py-8 flex m-auto">
185省略
186                                    </div>
187                                  </div>
188                                </div>
189                              </Link>
190                            )}
191                          </>
192                        );
193                      })}
194                  </div>
195                </div>
196              </div>
197            </div>
198          </div>
199        </div>
200      </div>
201    </>
202  );
203};
204
205export default Post;
206
207
208

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

{
"name": "croud-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.9.3",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^2.9.7",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.0.0-rc.1",
"@mui/styled-engine-sc": "^5.0.0-rc.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"firebase": "^9.8.4",
"moment": "^2.29.4",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hook-form": "^7.34.2",
"react-image-resizer": "^1.3.0",
"react-spinners": "^0.13.4",
"react-tag-input": "^6.8.1",
"react-tag-input-component": "^1.1.1",
"styled-components": "^5.3.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "^18.0.3",
"@types/react": "^18.0.15",
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"typescript": "^4.7.4"
}
}