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

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

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

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

TypeScript

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

Q&A

1回答

756閲覧

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

kakuzo

総合スコア0

React Native

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

TypeScript

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

0グッド

1クリップ

投稿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;

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

総合スコア120

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.54%

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

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

質問する

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

React Native

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

TypeScript

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