Firestore document with umlaut, two different "ö" - react-native

Question

My problem is, when I try to set up a new document in my firestore with a name including umlaut "ö" it writes it in a worse way. Can you compare both documents and tell me what the difference between these two "ö" are? In the first picture the "ö" is bigger than in the second picture. Because of that my further functions - for example search function which is looking for the document name - is not working for document names with umlaut. I can't figure out the answer of my problem. I hope you guys can show me the right way to handle this. I don't want to replace the umlauts.
Should I decode my variable which I pass as the document name in my setup function?
First image:
Second image:
Update:
I will explain a little bit more about my goal. I have an index.html upload form for multi-image upload to Firebase storage and writing the imageurl and other information to the |irestore. When I upload my image folder, I retrieve the path of the imagedata from my system and make a split to have only the foldername. I use this name as the document name for my firestore (it is working for folders without an umlaut in the name). But when I write the same name for creating a document through the firebase console or replace it with a variable text = "my string for foldername" it is not matching. I would say the retrieved foldername has a different coding for example for the letter "ö".
var relpath = files[i].webkitRelativePath;
folder = relpath.split("/");
var foldername= "";
//foldername = unescape(encodeURIComponent(folder[0]));
foldername = folder[0];
var storage = firebase.storage().ref().child('kitaDE/duesseldorf/'+foldername+'/'+files[i].name);
//upload file
var upload = storage.put(files[i]); //webkitRelatviPath hinzugefügt
//update progress bar
upload.on(
"state_changed",
function progress(snapshot) {
var percentage =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
document.getElementById("progress").value = percentage;
},
function error() {
alert("error uploading file");
},
function complete() {
document.getElementById(
"uploading"
).innerHTML += `${files[i].name} uploaded <br />`;
},
);
db.collection("kitaDE").doc(foldername).set({
image: [],
id: "",
active: true,
title: "",
street: "",
zipcode: "",
location: "",
})
Update 2
I copy & paste the foldername and my direct entry for the name over the firebase console.
Foldername copied:
Am Köhnen
Entered name in firbase console through my keyboard:
Am Köhnen
It looks for me the same. I run my javascript code and give out the following part on the console log.
var relpath = files[i].webkitRelativePath;
folder = relpath.split("/");
var foldername= "";
foldername = folder[0];
var foldername2 = "Am Köhnen";
var foldername3 = decodeURIComponent(escape(foldername2))
My result is the following screenshot.
Console.log Output
You can see that first name seems right, but first and the third output names are not matching. It seems like they are the same but they not, i refer here to my both picture at the begin of my post here. Firestore handle the names different.
To get a hex dump, I ran this command in the parent directory of the problematic one:
bash$ printf '%s\n' Am\K*hnen | xxd
00000000: 416d 204b 6fcc 8868 6e65 6e0a Am Ko..hnen.

Answer 1

There are multiple sequences that result in an ö character being displayed. One of them uses a single Unicode codepoint to represent the character (U+00F6), but the other actually uses a separate codepoint for the o and then another one for the umlaut (U+006F U+0308).
Also see:
The wikipedia page on combining characters
The wikipedia list of unicode characters
My first idea is that the two titles in your documents are written with different Unicode sequences.
I thought that Firestore would equate these two ways of writing, but I can't find anything in the documentation about that now. If it doesn't, then that would explain why a query that matches one of the codepoint combinations for ö doesn't match the other combination.