エラーコード：Error in render: "TypeError: Cannot read property 'toDate' of undefined" found in を解消したい

[Vue warn]: Error in render: "TypeError: Cannot read property 'toDate' of undefined"

[Vue警告]：レンダリングのエラー：「TypeError：未定義のプロパティ 'toDate'を読み取れません」

というエラーが正常に動作しているのにも関わらず出ている状況です。原因がわからず困っています・・

赤で囲っているページネーション部にて１ページではエラーが出ていないのですが、２ページ目に遷移した際にエラーが出ます。。
ちなみに１ページ目の画面では以下のようにエラーは出ておりません。

分かる方お力添えをいただけませんでしょうか。

よろしくお願いいたします。

#board.vue(親コンポーネント)

<template>
  <div>
    <Header />
    <Search v-model="searchWord" />
    <Post />
    <div class="post">
      <h2 id="top" class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items paginate-pctb">
          <paginate
            name="paginate-log"
            tag="ol"
            :list="filteredPostData"
            :per="12"
            v-if="filteredPostData.length !== 0"
          >
            <!-- filteredPostDataにて該当する投稿がある場合、表示。 -->
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :key="list.id"
            />
          </paginate>
          <div v-else class="nothing">" {{ searchWord }} " に該当する投稿はありませんでした。</div>
          <!-- filteredPostDataにて該当する投稿がない場合、上記を表示させる。 -->
          <paginate-links
            for="paginate-log"
            name="paginate-log"
            class="pagination flex"
            v-scroll-to="postTop"
            :async="true"
            :show-step-links="true"
            :style="
              (filteredPostData.length !== 0) == ''
                ? 'display:none;'
                : 'display:flex;'
            "
          ></paginate-links>
          <!-- filteredPostDataにて該当する投稿がない場合、非表示。投稿がある場合、表示。 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Post from "@/components/post.vue";
import List from "@/components/list.vue";
import Search from "@/components/search.vue";
import Vue from "vue";
import VuePaginate from "vue-paginate";
Vue.use(VuePaginate);
const VueScrollTo = require("vue-scrollto");
Vue.use(VueScrollTo);

export default {
  data() {
    return {
      title: "",
      contents: "",
      image: "",
      postData: [],
      paginate: ["paginate-log"],
      postTop: "#top",
      userDatas: [],
      searchWord: "",
      currentUserBookmarkIds: []
    };
  },
  components: {
    Header,
    Post,
    List,
    Search
  },
  computed: {
    filteredPostData() {
      if (this.searchWord != "") {
        return this.postData.filter(v => {
          return ~v.genre.indexOf(this.searchWord);
          //検索ワード「this.searchWord」が「genre」に存在する場合、結果を返す。
          //否定演算子を使って~v(-1) は 0 となるため、見つからなかった場合は、実行されない。
        });
      } else {
        return this.postData;
        //サーチ内容がない場合はそのまま、それ以外はフィルタ結果を返す
      }
    }
  },
  created() {
    // "posts"コレクションの全ドキュメントを取得。
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        //"posts"(参照先)のスナップショットを得る
        snapshot.forEach(doc => {
          //上記で得たデータをforEachでドキュメントの数だけ"doc"データに格納
          this.postData.push(doc.data());
          //更にpostDataの空配列に格納した"doc"データを格納
        });
      });

    //各ユーザーがブックマークしたリスト

    firebase
      .firestore()
      .collection("users") //「users」コレクションを参照
      .doc(this.$route.params.uid) //現在表示中ユーザーを参照
      .collection("bookmarks") //「bookmarks」サブコレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          this.currentUserBookmarkIds.push(doc.data().postId);
          //「postId」を追加し、this.currentUserBookmarkIdsへ格納
          console.log(this.currentUserBookmarkIds);
        });
      });
    firebase
      .firestore()
      .collection("posts") //「posts」コレクションを参照
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          //forEachで全てのドキュメントに対して
          if (this.currentUserBookmarkIds.includes(doc.data().id)) {
            //this.currentUserBookmarkIdsに「id」が含まれていたら、
            this.postData.push({
              isBookmarked: true
            });
            //isBookmarkedを追加。
          }
          console.log(this.currentUserBookmarkIds);
          console.log(this.postData);
        });
      });

    firebase
      .firestore()
      .collection("users")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
        });
      });
  }
};
</script>

#list.vue(子コンポーネント)

<template>
  <div class="list">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          :src="
            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
          "
        />
        <h3>{{ list.title }}</h3>
        <!-- {{list}} -->
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
        <img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" />
        <!-- v-if="hasBookmark(list)" -->
        <!-- <img
          src="../assets/ブックマーク未保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="deleteBookmark"
        />-->
        <!-- v-else -->
        <p class="post-time">{{ $dayjs(list.time).toDate().format('YYYY/M/D HH:mm')}}</p> 
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Vue from "vue";
import dayjs from "dayjs";

dayjs.locale("ja");
Vue.prototype.$dayjs = dayjs;

export default {
  data() {
    return {
      bookmarkId: "",
      userDatas: [],
      preview: require("../assets/デフォルト画像.jpg")
    };
  },
  props: {
    list: {
      type: Object
    },
    index: {
      type: Number
    }
  },

 ~ 省略 ~

</script>

#追記１

#追記２

#追記３

https://qiita.com/yuiken/items/1a43a2a87ca421626f18
https://qiita.com/okonomiyaki11/items/aefa7397d1f0d43dcd58

参考になりそうな記事を見つけましたが、ページを遷移させた時にのみエラーが出る原因が分かりません・・

分かる方いらっしゃいましたらご教示願いたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

'toDate' というプロパティがない、というエラーなので、
それがくっついてる変数のナカミがおかしいです。
まずは、それらをチェックしてみよう

投稿2021/06/21 01:38

y_waiwai

総合スコア88042

TMTN

2021/06/21 01:52

ご回答有難う御座います。 {{ $dayjs(list.time).toDate().format('YYYY/M/D HH:mm')}}こちらの中身がおかしいということでしょうか。追記１に追加したのですが、投稿に list.time の値を表示してみました。そもそもこのタイムスタンプ値を日付時間に変換ができないのでしょうか。。