FirebaseError: Function CollectionReference.doc() cannot be called with an empty path

Question

I am getting a list of id's from users collection then when I am trying to get by id data from another collection anunturi this error:

FirebaseError: Function CollectionReference.doc() cannot be called with an empty path

<script>
import { db } from "../Utils/fire.js"
import { current_user } from "../Utils/auth.js"
import Room from "./Room.svelte"

async function interestedForUser(){
    let query = await db.collection("users").doc($current_user.uid).get()
    const listingsIds = await query.data().anunturi_interesat 
    console.log(listingsIds) //ok
    let anunturi = []
    for (let id of listingsIds) {
        console.log(id, typeof(id)) // ok
        let anunt = await db.collection("anunturi").doc(id).get() // nok
        let anunt_data = await anunt.data() 
        if (anunt_data) {
            anunturi.push({...anunt_data, listingId:id})
        } 
    }
    return anunturi
}

</script>

{#await interestedForUser()}
    <p class="text-center mt-12">Se incarca...</p>
{:then listings}
    {console.log("In template:", listings, listings.length)} //ok (but why?)
    {#if listings.length > 0} // this doesn't get rendered..
        {#each listings as camera }
            <Room {camera}/>
        {/each}
    {:else}
        <p class="text-center mt-12">Nu ai postat nici un anunt</p>
    {/if}
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

UPDATE:

The issue was in the <Room {camera}/> component. A child of Room component had a firestore reference undefined.

Answer 1

I've the same type of problem in Next JS when I try to fetch data of a specific id from Firebase.

Try this if you're facing issue in next js.

import React, { useState ,useEffect} from "react";
import StudentsWithID from "../../Componenets/Navbar/Form/StudentsWithID";
import firebase from 'firebase/app';

const StudentWithId = ({sid}) => {
  const [student,setStudent] =useState();
  /*
  const router = useRouter();
  const { sid } = router.query; 
  
  ^^^^^^^^^^^^^^^^^^^^^
  iiiiiiiiiiiiiiiiiiiii
  
  I try to get id of student with these lines. but It doesn't when i build the project (npm run build)
  ?: file name is [sid].js || It is not working in [id].js

  */
  useEffect(()=>{
    const loadStudent=async ()=>{
   try{
      const result= await firebase.firestore().collection("students").doc(String(""+sid.sid)).get()
      const my_student=result.data()
      if(my_student){
      setStudent(my_student)
      console.log(my_student)
    }else{
      console.log("Stundent not found")
    }
  }catch(err){
console.log("-----------------StudentError------------------")
console.log(err.message);
  }}
loadStudent()
  },[])
 
  return (
    <div>
      <StudentsWithID props={student}/>
    </div>
  );
};

export async function getServerSideProps({query,params}) {
  //todo: when I try to get id in server it works perfectly.
const sid=query||params
  return{
    props:{
      sid:sid
    }
  }

}

export default StudentWithId;