使用Firestore反应静态网站，无法导出到CSV

首先，我是javascript，react和firestore的新手：）所以请原谅我。我在这里阅读了许多其他有关将存储到csv的数据的问题，但它们并没有解决我的问题。我正在一个蔚蓝的静态托管React网站上，该网站将列出单个卡上的用户（完成此操作），提供一种基于卡内日期进行查询的表格（此操作完成），然后使用获取的数据返回以全部在浏览器中（我受困的地方）填充/下载CSV文件。

我的数据结构：

Collection "users"
-Document "User"
--name
--email
--Collection "game_days"
---Document "GameDay"
----date
----notes
----games_played // this is an array ie: [{"hours": 4, "game": "NHL 93"}, {"game": "FF10", "hours": 3}]
Collection "video_games"
-game_name
-producer

当我在获取用户文档的快照后使用db.collectionGroup（“ game_days”）查询数据库时，我一直试图将其放入csv文件中，理想情况下将标题和游戏中的日期作为键，在相应位置列出的小时数。

我什至无法格式化csv，因为我在处理返回的查询数据时遇到了麻烦。目前，我正在将新对象推入数组中，结果几乎像是json，其中包含我想要的所有信息...我只是似乎无法将其转换为可以提取数据的格式。

我的组件代码：

function custom_csv2(objArray) {
    console.log(objArray)
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }

        str += line + '\r\n';
    }
    console.log(str)
}
const UserDataQuery = ( {user_id} ) => {
     let uid_start = "start"+user_id //concatenating user id on the end to identify the input field from form
     let uid_end = "end"+user_id
     const get_user_data = e => {
                e.preventDefault();
                let j_array = []
                let coll_name = "users/" + user_id + "/game_days"
                let start_date = firebase.firestore.Timestamp.fromDate(new Date(document.getElementById(uid_start).value));
                let end_date = firebase.firestore.Timestamp.fromDate(new Date(document.getElementById(uid_end).value));
                db.collection(coll_name).where("timestamp", ">", start_date).where("timestamp", "<", end_date)
                    .get()
                    .then( function(querySnapshot) {
                    querySnapshot.forEach(function (doc) {
                        let user_data = JSON.stringify(doc.data())
                        setTimeout(j_array.push(user_data), 1000) //allow time for the query to process
                    });
                }).then(custom_csv2(j_array));
    return (
            <form>
                <div className="form-group">
                    <label htmlFor="start date">Start Date</label>
                    <input 
                    type="date"
                    className="form-control" 
                    placeholder="MM/DD/YYYY"
                    id={uid_start}
                    />
                </div>
                <div className="form-group">
                    <label htmlFor="end date">End Date</label>
                    <input
                    type="date"
                    className="form-control"
                    id={uid_end}
                    placeholder="MM/DD/YYYY"
                    />
                </div>
                <button className="form-control btn btn-primary" type="submit" onClick={get_user_data}>
                Submit
                </button>
            </form>
          )
      } 

我的函数custom_csv2中的第一个console.log输出：

0: "{"date":"6-2-2020","timestamp":{"seconds":1591070400,"nanoseconds":0},"notes":"gecko shmecko","games_played":[{"hours":9,"game":"Gilded Gecko"}]}"
1: "{"date":"6-12-2020","games_played":[{"hours":3,"game":"Gilded Gecko"}],"timestamp":{"seconds":1591934400,"nanoseconds":0},"notes":""}"
2: "{"date":"6-16-2020","notes":"nice","timestamp":{"seconds":1592280000,"nanoseconds":0},"games_played":[{"game":"Funnest Game","hours":12}]}"
3: "{"notes":"","games_played":[{"hours":6,"game":"Gilded Gecko"},{"game":"NHL 93","hours":2},{"hours":4.5,"game":"FF10"},{"game":"Funnest Game","hours":0.5}],"date":"06-17-2020","timestamp":{"seconds":1592366400,"nanoseconds":0}}"
4: "{"date":"06-18-2020","timestamp":{"seconds":1592452800,"nanoseconds":0},"tasks":[{"hours":2,"game":"NHL 93"},{"hours":12,"game":"Funnest Game"},{"hours":6,"game":"FF10"},{"hours":1,"game":"Gilded Gecko"}],"notes":"nicuuu"}"
5: "{"timestamp":{"seconds":1592452800,"nanoseconds":0},"notes":"lunch","date":"6-18-2020","games":[{"hours":12,"game":"FF10"}]}"

第二个控制台日志仅输出一个空字符串。

我觉得我已经很接近能够做我想做的事情了……如果我尝试对数组进行字符串化，它将返回一个空字符串，因为它充满了我认为的对象，并且如果我尝试将数组到一个对象（即let j_array = {}：），那么我不能.push（）到它。我也试过推doc.data()数组而不先进行字符串化处理，但这看起来比字符串化的版本难处理。我也尝试过遍历j_array并执行诸如基于数组中的索引的数据行之类的操作，但是在迭代过程中它似乎没有执行任何操作。我在使用firestore对象时遇到了一些麻烦，大多数情况下，我以前只是通过REST API使用json，并使用python进行编码。因此，我不知道我只是一个菜鸟还是缺少的东西，或者是否可以更好地构造数据，这些数据是在设计将数据上传到Firestore的应用程序时创建的。

任何有关如何使用Firestore数据以使其格式化为csv的建议都将不胜感激。