如何从 Firestore 数据库中检索数据答案

【问题标题】：How to retrieve data from a Firestore database如何从 Firestore 数据库中检索数据
【发布时间】：2021-10-26 02:46:34
【问题描述】：

我在 React 中做一个项目，在我输入一个值然后单击搜索按钮后，应用程序会搜索该 id 是否存在于数据库中。如果是这样，它将在同一页面中显示搜索结果。我无法分配搜索值然后显示它。当我尝试将搜索结果分配给数组时，它给了我错误：

Type 'DocumentData[]' is not assignable to type 'Dispatch<SetStateAction<Identification[]>>'.
Type 'DocumentData[]' provides no match for the signature '(value:SetStateAction<Identification[]>): void'.

当我对无变量中的数据进行 console.log 时，我可以获得结果，但我需要在 setId 变量中。

代码如下：

import React, {ChangeEvent} from "react";
import { useState,useEffect } from "react";
import LongText from "../atoms/LongText";
import AppListBI from "./AppListBI";
import {Identification} from "../../assets/Person/Person";
import db from "../../firebase.config"

const Core = () => {
var [input, setInput] = useState('')
const [showResults, setShowResults] = React.useState(false)
var [person, setId] =  useState<Identification[]>([]);

const fetchBI =  async () => {
const ref=db.collection('id').where('numberId','==',input).get().then((snapshot) => {
    snapshot.docs.forEach(doc =>{
        setId=[...person,doc.data()]
      //I also tried
        setId=doc.data()
    })
})
}

return (
<>
<div className="mx-7">
<span className="font-bold text-xl"><h5>Pesquisar:</h5></span></div>
<div className="flex justify-center">
<LongText placeholder="Pesquisar Id" onChange={
    (e: ChangeEvent<HTMLInputElement>)=>setInput(e.target.value)}
    onClick={useEffect(()=>{
    setShowResults(true)
    fetchBI();
})}/>
</div>

<div className="flex justify-center">
<span className="my-4 w-11/12">
{ showResults ? <AppListId persons={person} /> : null }
</span>
</div>

</>

);

}

export default Core;

【问题讨论】：

标签： javascript reactjs typescript google-cloud-firestore

【解决方案1】：

经过漫长的日子，我找到了解决方案：我交易了这个：

 const fetchBI =  async () => {
 const ref=db.collection('id').where('numberId','==',input).get().then((snapshot) => {
snapshot.docs.forEach(doc =>{
    setId=[...person,doc.data()]

到：

const fetchBI =  async () => {
try{
var people : ID[] = []
await db.collection('id').where('numberId','==',input).get().then(
    querySnapshot=>{
        const data = querySnapshot.docs.map(
            doc=>{
            let dat = doc.data()
                people.push({
                    numberId: dat.numberId,
                    name: dat.name,
                    dateOfBirth: dat.dateOfBirth,
                    placeOfBirth: dat.placeOfBirth,
                    fathersName: dat.fathersName,
                    mothersName: dat.mothersName,
                    gender: dat.gender,
                    profession: dat.profession,
                    dateOfIssue: dat.dateOfIssue,
                    expirationDate: dat.expirationDate

                })
            })
            setId(people)
    }
   )
  }catch (error) {
 console.log(error.message)
 }
 }

【讨论】：