firestore 错误：“不支持嵌套数组”。 Firestore/p5.js 问题

Question

有人可以帮助我更好地理解这个错误吗？我正在尝试使用 p5.js 和 firebase/firestore 创建一个站点，您可以在该站点上在画布上绘制一些东西，然后将绘图保存到 firestore，但是当我单击保存时，我收到此错误：

error.ts:166 未捕获的 FirebaseError：使用无效数据调用函数 DocumentReference.set()。不支持嵌套数组

到目前为止我的代码：

var drawing = [];
var currentPath = [];
var isDrawing = false;

function setup() {
    canvas = createCanvas(400,400);
    canvas.mousePressed(startPath);
    canvas.parent('canvas');
    canvas.mouseReleased(endPath);
    var saveButton = select('#saveButton');
    saveButton.mousePressed(saveDrawing);
}

function startPath() {
    isDrawing = true;
    currentPath = [];
    drawing.push(currentPath);
}

function endPath() {
    isDrawing = false;
}

function draw() {
    background(0);

    if (isDrawing){
        var point = {
        x: mouseX,
        y: mouseY
        }
    currentPath.push(point);
    }

    stroke(255);
    strokeWeight(7);
    noFill();
    for (var i = 0; i < drawing.length; i++) {
        var path = drawing[i];
        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}

function saveDrawing(){
    db.collection('joonistused').add({
        drawing: drawing
    });
    var result = ref.push(data, dataSent);
    console.log(result.key)

    function dataSent(status) {
        console.log(status);
    }
}

编辑：如何将数组中的绘图坐标存储到 Firestore？喜欢将我的绘图保存到 Firestore 中吗？

Answer 1

事实上，drawing 是一个数组，其中直接项也是数组。由于某些技术限制，Firebase 似乎不允许拥有数组数组。

similar question on StackOverflow 的答案表明您仍然可以间接拥有数组数组，如Troy Michael 所述：

您可以调整一个将具有对象类型的数组转换为映射的序列化函数。键可以是数字以保持顺序。

即{ 1：对象，2：对象2 ... }

在反序列化时，您可以获得 Object.values(data);将其放回数组中以供客户端使用。

您可以这样做，或者简单地将子数组嵌套到对象中，其中drawing 类似于[ { items: [ ... items of array ...] }, ... ]。现在注意drawing 是一个对象数组，其中每个对象都有一个名为items 的字段，它是一个项目数组。根据引用的问题，似乎足以解决该限制。