【Vue x Firestore】自身が投稿した記事のみをマイページに表示させたいです。

Question

#自身が投稿した記事のみをマイページに表示させたいです。

現在投稿自体には投稿したタイミングでuidというidを持たせてFirestoreにデータ追加しているのですが、
それをマイページで自身の投稿したものだけマイページに表示させたく考えています。

マイページを表示中は、mypage/uidという形でURLを取得してます。

<h3 class="post-list flex">{{ profileData.name }} さんの投稿一覧</h3>
        <div class="profile-posts">
        <List v-for="(list, index) in listData" :index="index" :list="list :key="list.id"/>
        </div>

.doc(this.$route.params.uid)で現在のURLのパラメータを取得して
それに合致するものだけマイページに表示させようと思っているのですが、
現状以下のソースで何も投稿が表示されなく困っています。。

export default {
  data() {
    return {
      listData: [],
    };

created() {

    firebase
      .firestore()
      .collection("posts")
      .doc(this.$route.params.uid)
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.listData.push(doc.data());
        });
      });
  },

原因が分かる方いらっしゃいましたらお力添えをいただきたいです。

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

Comments

[Masa-Shin]

- listDataには値が入っていますか？
- consoleに何かエラーは出ていますか？
- thenのforeachの中のdoc.data()にはちゃんと値が入っていますか？

[TMTN]

index.esm.js?2591:54
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

eval @ index.esm.js?2591:54
./node_modules/firebase/dist/index.esm.js @ chunk-vendors.js:1454
__webpack_require__ @ index.js:849
fn @ index.js:151
eval @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/main.vue?vue&type=script&lang=js&:2
./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/main.vue?vue&type=script&lang=js& @ index.js:1022
__webpack_require__ @ index.js:849
fn @ index.js:151
eval @ webpack-internal:///…e=script&lang=js&:2
./src/views/main.vue?vue&type=script&lang=js& @ index.js:2115
__webpack_require__ @ index.js:849
fn @ index.js:151
eval @ main.vue?f47d:1
./src/views/main.vue @ index.js:2103
__webpack_require__ @ index.js:849
fn @ index.js:151
eval @ index.js?a18c:1
./src/router/index.js @ index.js:1983
__webpack_require__ @ index.js:849
fn @ index.js:151
eval @ main.js:12
./src/main.js @ index.js:1971
__webpack_require__ @ index.js:849
fn @ index.js:151
1 @ index.js:2296
__webpack_require__ @ index.js:849
checkDeferredModules @ index.js:46
(anonymous) @ index.js:925
(anonymous) @ index.js:928
mypage.vue?1dde:452 Uncaught (in promise) ReferenceError: cl is not defined
at eval (mypage.vue?1dde:453)
at eval (prebuilt-ac190846-5fb4dac2.js?d66c:18162)
at eval (prebuilt-ac190846-5fb4dac2.js?d66c:16394)
at eval (prebuilt-ac190846-5fb4dac2.js?d66c:11576)
at t.inorderTraversal (prebuilt-ac190846-5fb4dac2.js?d66c:2817)
at t.inorderTraversal (prebuilt-ac190846-5fb4dac2.js?d66c:2817)
at t.inorderTraversal (prebuilt-ac190846-5fb4dac2.js?d66c:2817)
at t.inorderTraversal (prebuilt-ac190846-5fb4dac2.js?d66c:2735)
at t.forEach (prebuilt-ac190846-5fb4dac2.js?d66c:11575)
at t.forEach (prebuilt-ac190846-5fb4dac2.js?d66c:16393)

というエラーは出ています。

しかし、doc.date()には値はしっかりとれています。

[Masa-Shin]

listDataにも値がきちんと入っているとすれば、Listには値が渡っているはずなので、List以下でエラーが起きているのですかね。

エラーメッセージに`Uncaught (in promise) ReferenceError: cl is not defined`と出ていますが、貼られているコードに「cl」という記述がないのも気になります。

[TMTN]

clというのは自信がコンソールログをclとショートカットで設定しているせいかと思います。
それを消してリロードしたらエラーは出ていない状況です。

[hoshi-takanori]

collection("posts").doc(this.$route.params.uid).get() の結果は単一のドキュメントになるはずですね…。
collection("posts").where("uid", "==", this.$route.params.uid).get() みたにする必要があるはず。
Firestore のデータ構造はどうなってますか？

[TMTN]

そうだったのですね！！一つ勉強になりました！本当にありがとうございます！

Answer 1

    firebase
      .firestore()
      .collection("posts")
      .where("uid", "==", this.$route.params.uid)
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.listData.push(doc.data());
          console.log(doc.data());
        });
      });
  },

上記により解決することが出来ました。