Skip to content
Advertisement

How to retrieve data from a Firestore database

I am doing a project in React, where after I type a value and then click on search button, the app searches if the id exists in the database. If so, it displays the result of the search in the same page. I am having trouble assigning the value of the search and then displaying it. When I try to assign the result of the search to an array, it gives me the error:

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

When I did a console.log of just the data in no variable, I can get the results, but I need it in the setId variable.

Here is the code:

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;

Advertisement

Answer

After long days I found the solution: I traded this:

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

to:

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)
 }
 }
Advertisement