質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

受付中

React, TypeScriptでfirestoreからデータを取得したいが型まわりでエラーが出る

kakuzo
overk

総合スコア0

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0グッド

1クリップ

160閲覧

投稿2022/11/24 03:41

前提

React, TypeScriptでfirestoreからデータを取得したいのですが、以下のようなエラーが発生しました。

実現したいこと

  • firestoreからpostsデータを取得し、map関数でpostを展開

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

エラーメッセージ (parameter) querySnapshot: QuerySnapshot<DocumentData> ---------------------------------------------------------------------------- 型 'DocumentData[]' の引数を型 'SetStateAction<Posts>' のパラメーターに割り当てることはできません。 型 'DocumentData[]' を型 'Posts' に割り当てることはできません。 型 'DocumentData' には 型 '{ displayName: string; userName: string; text: string; image: string; }' からの次のプロパティがありません: displayName, userName, text, image

該当のソースコード

TypeScript

1import { Box, Heading } from "@chakra-ui/react"; 2import Post from "./PostOne"; 3import TweetBox from "./TweetBox"; 4import { collection, getDocs } from "firebase/firestore"; 5import db from "../../firebase"; 6import { useState } from "react"; 7 8type Posts = { 9 displayName: string; 10 userName: string; 11 text: string; 12 image: string; 13}[]; 14 15const TimeLine = () => { 16 const [posts, setPosts] = useState<Posts>([]); 17 const postsColRef = collection(db, "posts"); 18 getDocs(postsColRef).then((querySnapshot) => { 19 setPosts(querySnapshot.docs.map((doc) => doc.data())); 20 }); 21 22 return ( 23 <Box 24 overflowY="scroll" 25 flex="0.45" 26 borderRight="1px solid #efeff2" 27 css={{ "&::-webkit-scrollbar": { display: "none" } }} 28 > 29 <Box 30 background="white" 31 border="1px solid #efeff2" 32 p="15px 20px" 33 top="0" 34 textAlign="left" 35 position="sticky" 36 > 37 <Heading fontSize="20px" as="h2" fontWeight="bold"> 38 ホーム 39 </Heading> 40 </Box> 41 <TweetBox /> 42 43 {posts.map((post) => ( 44 <Post 45 displayName={post.displayName} 46 userName={post.userName} 47 text={post.text} 48 image={post.image} 49 /> 50 ))} 51 </Box> 52 ); 53}; 54 55export default TimeLine;

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

Firestoreから取得した値をそのまま格納するのではなく、例えば以下のように展開すればいけそうでしょうか?

setPosts(querySnapshot.docs.map((doc) => { return { displayName: doc.data().displayName, userName: doc.data().userName, text: doc.data().text, image: doc.data().image, } ));

投稿2022/12/10 16:37

ams2020

総合スコア93

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。