所以我用nextJS建了一个商店
我有两个变量，它们被一个函数从数据库中赋值

let size: Size

    let ribbonTable: Ribbon
    
    async function findSizeCategory(): Promise<void> {
    const category = product?.category ;
    switch(category) {
        case "mens":
        size = await db.select().from(mens_size);
        break;
        case "womans":
        size = await db.select().from(womans_size);
        ribbonTable = await db.select().from(ribbon)
        break;
        case "kids":
        size = await db.select().from(kids_size);
        ribbonTable = await db.select().from(ribbon)
        break;
    }
    }
    await findSizeCategory()

字符串
但是当我在map函数中使用它们时，如果ribbonTable的值大于0，

<label className="block">
            what size are you?
            <select>
            {size.map(s =>
                <option key={s.size_id} value={`${s.size_id}`}>{s.size}</option>
            )}
            </select>
        </label>

                {ribbonTable && ribbonTable.length > 0 && (
                    <label className="block ">
                        Select a ribbon:
                        <select>
                            {ribbonTable.map(r =>
                                <option key={r.ribbon_id} value={r.ribbon_id}>{r.ribbon}</option>
                            )}
                        </select>
                    </label>
                )}

型