### 前提

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

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

id sample123@gmail.com  
pass sample345!

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

### 実現したいこと

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

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

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-02/fcbf92bc-c744-4ab9-97fe-2ad3c98fce21.png)

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

```

    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
    
```

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-12/afb4c579-2bab-428a-83d5-a201c275ed76.png)

```

    /post/[id].jsx
    import系
    
    const Post = () => {
      const [ID, setID] = useState(null);
      const [context, setContext] = useState("");
      const [categori, setCategori] = useState("");
      const [photoURL, setPhotoURL] = useState();
      const [users, setUsers] = useState(null);
      const [displayName, setDisplayName] = useState("");
      const [createtime, setCreatetime] = useState("");
      const [isUpdate, setIsUpdate] = useState(false);
      const [posttitle, setPostTitle] = useState("");
      const databaseRef = collection(database, "CRUD DATA");
      //データベースを取得
      const [firedata, setFiredata] = useState([]);
      const [downloadURL, setDownloadURL] = useState(null);
      const [likecount, setLikecount] = useState(0);
      const usersRef = collection(database, "users");
      const [userid, setUserid] = useState(null);
      const [netabare, setNetabare] = useState("");
      const [likes, setLikes] = useState(null);
      const [selected, setSelected] = useState(["最終回"]);
    
      let router = useRouter();
      const { id } = router.query;
      const auth = getAuth();
      const user = auth.currentUser;
    
      const getData = async () => {
        //firestoreからデータ取得
        const data = doc(database, "CRUD DATA", id);
        getDoc(data).then((documentSnapshot) => {
          setFiredata(documentSnapshot.data());
        });
      };
    
      const getID = (
        id,
        title,
        context,
        downloadURL,
        categori,
        cratetime,
        netabare,
        photoURL,
        userid,
        likes,
        selected
      ) => {
        setID(id);
        setContext(context);
        setPostTitle(title);
        setDownloadURL(downloadURL);
        setIsUpdate(true);
        setCategori(categori);
        setCreatetime(cratetime);
        setNetabare(netabare);
        setPhotoURL(photoURL);
        setUserid(userid);
        setLikes(likes);
        setSelected(selected);
        console.log(title);
        console.log(context);
      };
    
      const usersData = async () => {
        //firestoreからデータ取得
        await getDocs(usersRef).then((response) => {
          //コレクションのドキュメントを取得
          setUsers(
            response.docs.map((data) => {
              //配列なので、mapで展開する
              return { ...data.data(), id: data.id };
              //スプレッド構文で展開して、新しい配列を作成
            })
          );
        });
      };
    
      useEffect(() => {
        getData();
        usersData();
      }, [likes]);
    
      const updatefields = () => {
    更新処理
    }
      const deleteDocument = (id) => {
    削除処理
      };
    
      const handleClick = (id, likes) => {
    いいね処理
      };
      return (
        <>
          <SiteHead />
          <MuiNavbar />
    
          <div className="max-w-5xl m-auto">
            <div>
              <div>
                <div className="lg:w-full my-4 ">
                  {user && (
                    <>
                      {user.email == firedata.email && (
    更新ボタンと削除ボタン
    
                      )}
                    </>
                  )}
                  {isUpdate && (
                     更新フォーム
                  )}
                  <br></br>
                  <p>
                    <Link href="/">トップ</Link>　＞　投稿記事　＞　
                    {firedata.title}
                  </p>
                  <p className="flex justify-center my-6">
                    <Image
                      className="m-auto text-center max-w-sm"
                      height={500}
                      width={500}
                      src={firedata.downloadURL}
                    />
                  </p>
                  <div>
                    <div className="text-2xl my-4">{firedata.title}</div>
                    <br></br>
                    <p>
                      <AccessTimeIcon /> 投稿日時：{firedata.createtime}
                    </p>
                    <br></br>
                    {firedata.edittime && (
                      <p>
                        <AccessTimeIcon />
                        編集日時：{firedata.edittime}
                      </p>
                    )}
                    <br></br>
                    {firedata.selected &&
                      firedata.selected.map((tag, i) => (
                        <span className="text-cyan-700" key={i}>
                          #{tag}　
                        </span>
                      ))}
                    <br></br>
                      <p className="text-left">{firedata.context}</p>
                      <br></br>
                      {firedata.contextimage && (
                        <p className="flex justify-center">
                          <Image
                            className="m-auto text-center max-w-sm"
                            height={500}
                            width={500}
                            src={firedata.contextimage}
                          />
                        </p>
                      )}
                      <br></br>
                      <p>
                        <FavoriteIcon />
                        {firedata.likes}
                      </p>
                      <br></br>
                      {user && (
                        <SiteButton
                          href=""
                          text="いいねする"
                          className="inline my-2 m-4"
                          onClick={() => handleClick(id, firedata.likes)}
                        />
                      )}
                      <div key={id} className="cursor-pointer">
                        {users &&
                          users.map((user) => {
                            return (
                              <>
                                {firedata.email == user.email && (
                                  <Link href={`/profile/${user.userid}`}>
                                    <div key={user.userid}>
                                      <div className="bg-slate-200 my-8 py-8 flex m-auto">
    省略
                                        </div>
                                      </div>
                                    </div>
                                  </Link>
                                )}
                              </>
                            );
                          })}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    };
    
    export default Post;
    
    
    
    
```

### 補足情報（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"
    }
    }
    
```
CC BY-SA 4.0
2022-11-11T11:38:39.580
92164
2022-11-12T04:29:23.743
2022-11-12T04:29:23.743
52921
52921
question
reactjs next.js
Reactでリロードをするとエラーが出る