JavaScript Array Method Does Not Produce Array

I've been working on a function that should return an array of strings, but for some reason, it's not returning as expected:

let returnArr = [];
export async function snapshotToArray() {
    const db = firebase.firestore();
        db.collection('userinfo').get().then(querySnapshot => {
            querySnapshot.forEach(documentSnapshot => {
                let id = documentSnapshot.id;

               returnArr.push(id).toString();
            });
            console.log(returnArr);

            return returnArr;

        });

}
It's interesting to note that the console output matches what I want the function to return.

The function that calls the Array creation Function is this one:

export async function getStaticPaths() {
    const paths = await snapshotToArray();
    return {
        paths,
        fallback: false
    }
}

However, despite what the console shows, the function doesn't seem to return the expected value.

As a result, I'm encountering this error message:

Error: Invalid `paths` value returned from getStaticPaths in /user/[name].
`paths` must be an array of strings or objects of shape { params: [key: string]: string }

I have tried various methods to resolve this issue without success. Any assistance would be greatly appreciated.

Answer №1

It looks like the snapshotToArray function does not have a return value.

let resultArray = [];
export async function convertSnapshotToArray() {
    const database = firebase.firestore();
    const queryResult = await database.collection('userinfo').get()
    queryResult.forEach(doc => {
        let id = doc.id;
       resultArray.push(id).toString();
    });
    console.log(resultArray);
    return resultArray;
}

Using async-await in this manner should solve your issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display Middleware Functions Attached in Console

I must say I was quite surprised by my inability to find any relevant information on this topic with a quick Google search. It seems like I may not have been digging deep enough. Essentially, I am seeking details about the middleware functions utilized in ...

The best way to eliminate empty JSON objects from a JSONArray

JSONObject selectedPack = arr_cat_details_old.getJSONObject(0).getJSONArray("pac_selected").getJSONObject(1); selectedPack.remove("pack_selected_id"); "pac_selected": [{ "pack_selected_id": "7" }, {}, { "pack ...

Discover arrays that have a common element within a group of arrays. There may be zero or multiple instances of matches

After analyzing the data structure below: array (size=3) 0 => array (size=4) 0 => string 'apple' (length=5) 1 => string 'colophon' (length=8) 2 => string 'byo-fusion-drive' (length=16) ...

Issue with Material UI button not properly redirecting to specified path

Having an issue with a button that should redirect to a specific component with props on click. <Button variant="contained" color="primary" className={classes.button} endIcon={<SendIcon/>} onClick={() => { <Redirect ...

JavaScript hack for improving slow scrolling experience with smooth scroll on Firefox

As a web application developer, I encountered a particular scenario where there are multiple position:fixed elements, canvases, and an overflow:scroll element. Unfortunately, scrolling in Firefox becomes extremely slow when smooth scrolling is enabled. Wh ...

When attempting to develop a discord bot using Heroku, I encounter an issue where the bot functions properly when run locally, but malfunctions once deployed on Heroku's platform

After successfully running index.js locally, I encountered an error upon trying to deploy the code on Heroku. The specific error received was: 2022-01-11T05:25:24.034595+00:00 app[worker.1]: at Module._compile (node:internal/modules/cjs/loader:1101 ...

Set up keycloak authentication for Next.js application using next-auth and Docker

I've been attempting to set up authentication for my NextJS app with Keycloak using NextAuth within a docker environment. Despite trying multiple approaches, I keep encountering the following error: frontend-1 | [next-auth][error][SIGNIN_OAUTH_ERROR] ...

What is the best way to apply fading effects to three divs containing additional divs?

Looking at this HTML and CSS code: HTML <DIV class="newsPic"></DIV> <DIV class="newsPicTwo"></DIV> <DIV class="newsPicThree"></DIV> CSS .newsPic { width: 500px; height: 200px; } .newsPicTwo { width: 500px; height: 2 ...

Arrange a List in immutable.js by using an array of index values

My scenario involves working with an Immutable list to populate a drag and drop feature. The list items do not have any ids, only indices when mapped through. const list = Immutable.List([{"alias":"cat"},{"alias":"dog"},{"alias":"rat"}]) Upon dragEnd, I ...

Consolidate list: Make sure to leave only the currently active item open

For some reason, I am encountering an issue with this code on this platform. The problem is that every time I click on a list title, all items open up instead of just the one I clicked on. Is there a way to modify this code so that only the clicked item ex ...

Is it possible to manually activate a dropdown event using pure JavaScript?

I am attempting to manually trigger a dropdown event using JavaScript. Below is the function where I am trying to achieve this. I have successfully halted the initial event that occurs and now I need to initiate a dropdown event. stopNavigationTriggerDrop ...

Incorporating URL addresses and pagination features using React.Js and Material-UI components

I have a functional component-page on my website, where I display a table that fetches data from an API. To improve user experience, I implemented pagination using the Material-UI library. While the pagination functionality works fine in updating the table ...

Invoke the parent's function within the Local-Registration component of VueJs

I have a Vue object: var app = new Vue({ el: '#my-id', data() { return { example: 1 } }, methods: { exampleMethos(data) { console.log('data', data); } }, ...

Encountering problems with displaying the index value in *ngFor directive in Angular 5

I am encountering a problem with rendering the index of *ngFor directive for a specific scenario as described below. Suppose we have an array of objects like this: this.temp = [ {name:'John',age:24,visibility:'visible'}, {name:&ap ...

Mastering the art of reading arrays in Json with JavaScript

Recently, I stumbled upon some Json data that looks like this: var x = { "array1":"['x1','x2']", "array2":"['a1', 'a2']" } My mission is to display each element of the array individually: x1 x2 a1 a2 However, wh ...

constructing a nested container using XMLHttpRequest

I am working on creating a nested div-container structure using AJAX and adding the text "Hello World" to the inner container. The outer container serves as a holder for the inner container in this case. Below is the code I have written: index.html: ...

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

The execution of the HTTP request is not happening

As a newcomer to JS and Node, I am attempting to display a JADE view using JSON obtained from a REST API. Everything works perfectly when I run the http.request on its own, but as soon as I introduce modules and rendering statements, the http request funct ...

Performing AJAX requests in SvelteKit using the fetch function

Within my SvelteKit application, I am utilizing AJAX calls to interact with my API endpoints. An example of this can be seen in the following code snippet: +page.svelte <script> async function get_card() { const url = '/api/card/?cat ...

Locate the parent and child elements within an array

Within the array provided below, there are parent items as well as children. I am currently able to identify parents (depth 0) and their immediate children (depth 1), however I am unsure how to handle deeper nested levels. For reference, you can view the ...