タイムラインに投稿したコンテンツが表示されない

[miyazaki-ryo]

すみません、以下の問題が発生していて、 解決できずにいます。 お手数ですが、フォローいただけませんでしょうか。

①聞きたいことの一行まとめ タイムラインに投稿したコンテンツが表示されない

②起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット） タイムラインに投稿したコンテンツが表示されない

③ソースコード（関連するソースコード/全ソースコード） _id.vue

④問題解決するために試したこと（コードもあれば追記）

⑤問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想） 最後に追加したv-forからpostの値が表示されていない

⑥当該コンテンツを購入したnoteのアカウント saino_romeo

⑦noteのどのあたりまでやったのか 7章の最後まで進めてみましたが、 7-5. プロフィールページ　の 二つ目の動画のユーザ画面のタイムラインを表示するところからできませんでした そのまま進めてみたところ、通常のタイムラインにも投稿が表示されなくなってしまいました

[cohki0305]

質問ありがとうございます！ ソースコードちゃんと読みやすいような形で貼っていただきたいです！さすがにそれは読めないので...

あとエラーは出ていなかったですか？

[miyazaki-ryo]

ご返信、ありがとうございます

大変、申し訳ございません...。 こちらでいかがでしょうか。

users.zip

また、エラーはでていませんでした。 アプリの起動エラーと、Developer tool のconsoleのエラーが出現していないことを確認しております。

[cohki0305]

ファイルありがとうございます！！

タイムラインに投稿したコンテンツが表示されない

ということなので原因を探っていきましょうか！

投稿したコンテンツが表示されない原因として考えられるのは

1. そもそも投稿出来いない
2. 投稿できているが表示されていない

の2つだと思います。

二つ目の動画のユーザ画面のタイムラインを表示するところからできませんでした そのまま進めてみたところ、通常のタイムラインにも投稿が表示されなくなってしまいました

とのことなので、1の可能性も十分に考えられるのかなと思いました。 なので、まずはfirestoreを確認して投稿できているのか否かを確認するのがいいかなと思いました。

firestoreにデータが保存されていれば、2について考えて、 保存されていなければ、表示ではなくて投稿に関する処理に問題があるとわかります。

[miyazaki-ryo]

ご返信ありがとうございます。

1ですが、画像のように投稿すると以下のようにfirestoreに値が入ることが確認できています。

2が原因として考えられますでしょうか...?

[miyazaki-ryo]

_id.vueのこちらで、うまく表示できていないような気がするのですが、、、

<post v-for="post in posts" :key="post.id" :post="post" :mode="'profile'" />

他に疑った方が良いところはありますでしょうか...

[miyazaki-ryo]

データがきているかデバッグしたところ、_id.vueのこちらのwhere条件がうまく行っていなかったようです...

const snapshot = await db.collection('posts').where('userId', '==', userId).get() snapshotの値が空になっていました。外したところ、投稿が表示されました

firebase側の設定がうまく行っていないのでしょうか？ 連投して本当にすみません。。

[cohki0305]

調査ありがとうございます！原因わかりました！

const snapshot = await db.collection('posts').where('userId', '==', userId).get() snapshotの値が空になっていました。外したところ、投稿が表示されました

ということは、id で上手く検索出来ていないということだと思うのですよね！ これはすごい良い原因調査方法ですね。

これで僕も気づいたのですが、firestoreには userID となっているのですが、 where の条件には userId となっているのが原因ではないかと思いました！

なので保存するときに userId でフィールド名を指定してあげるか、where の条件に userID を使うことで問題解決すると思います 👍