0

前提

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

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にデータをずっとアクセスし続けてしまうため、重くなってしまいます。
リロード時にエラーが出ないように表示するにはどうすれば良いでしょうか。
よろしくお願いします。

イメージ説明

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

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

イメージ説明

/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"
}
}
1

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。